作者：juventus蒂尼_578 | 来源：互联网 | 2023-05-17 20:52
Getting Started with D3
CHAPTER 1 第一章 介绍
注：源码压缩包请到https://github.com/mikedewar/getting_started_with_d3下载，里面有学习所用的json文件
数据的可视化是一个老话题了。一直以来，我们总是通过这样或那样的方式来展现收集到的数据——这可以追溯到距今143年前，Minard画出了著名的《拿破仑东征图》（见下图）
译者注：拿破仑东征图又称《拿破仑征俄战役图》堪称信息可视化领域的骨灰级教材，是每一个信息可视化入门者的必修。1861年法国工程师Charles Joseph Minard绘制了1812年拿破仑征俄战役图，此图揭示了导致士兵大量死亡的元凶是低温。
现在，虽然我们进入了超速运转的时代（一方面是海量数据的激增，一方面是我们数据分析的发展和成熟），但是当我们渴望拥有更先进的可视化界面时，如：为上千万人创建动态的，互动性的图形，结合了最新一代浏览器的互联网为我们提供了这个绝佳的机会。
Javascript是现代浏览器的一种语言，卟啦卟啦卟啦.....（译者注：js就不多介绍了,唯一注意的是对于ie，D3支持ie9以上）
D3
D3是Mike Bostock所写的一个js库，脱胎于早期的一个可视化工具集 Protovis。D3可以让我们从数据集中操作网页元素，这些网络元素包括HTML，SVG或者Canvas元素，还可以根据数据集完成各种操作，例如，创建一个散点图，我们用D3来排列SVG圆点，圆点的cx，cy属性被设置在数据集的x，y中，然后转换刻度值，从整数值转换为像素值。
D3一个巨大的优势是你不用再学习一门新的绘图语言，它完全建立在html+js+css上，如果你对jquery很熟，那么你会发现D3没有什么学习曲线，你可以用你熟悉的工具来设计了，如，firebug或Developer Tools。
不同于传统的图形化工具，它们常常在设计者和网页中间设置一个中间层，D3把焦点集中于提供处理普通任务的helper函数（如创建轴与刻度）和处理高级任务（如创建可视化图像或和弦图）上。这意味着如果你经过了D3的学习曲线后，你就进入了一个动态的，可交互的，更加先进的可视化的世界！
基本设置
D3库可以从http://d3js.org网站下载，模板结构如下：
draw，本书贯穿讲这个方法，这是有一个参数的function，当data成功下载到客户端时它将执行，它将生成可视化所需的大段代码。
“use strict” 这句话表明我们用
JSLint来写严格的js代码（译者注：其是一个Javascript验证工具
，可以扫描Javascript源代码来查找问题。）
d3.json() function ，第一个参数是url，第二个参数是回调函数（我们总是缺省叫它draw），它会传递一个唯一的参数——json作为一个对象或数组，虽然D3也能传递xml或csv，但是本书只用json传输。
本书的教学方法是从例子出发的，这意味着教学的前几步可能会做几个并不美观的页面，我们首先不考虑css，等熟悉后添加css并不是什么难事。
纽约MTA（大都会捷运局总线）数据集
（译者注：MTA是什么不翻译了，纽约交通枢纽，我们这本书都是用它的数据来生成图表，数据是放在google上实时更新的，但是我们用压缩包里的json数据，所以并不需要太关注这个了，关于压缩包里文件组成也不介绍了，一看便知！）
服务器端数据
测试代码因为需要异步，所以需要放到服务器端，本书推荐的是Python的SimpleHTTPServer（译者注：书中没有详细介绍，不过放到服务器端应该谁都会的，如果真的嫌麻烦，不妨去Cloud9——一个云端IDE，git一下D3的例子代码，这样所有的都有了！）
京公网安备 11010802041100号