d3.js:数据可视化利器之快速入门

hello,data!

在进入d3.js以前，咱们先用一个小例子回顾一下将数据可视化的基本流程。

• 任务

用横向柱状图来直观显示如下数据：

1. var data = [10,15,23,78,57,29,34,71];

简单地思考一下，要完成这个任务有两个问题须要解决：

1. 用什么可视元素来表现横向柱？
2. 数据对应到可视元素的什么属性？

这个不算困难，咱们使用HTML的DIV元素来实现，代码参见http://***/course/54fd40cfe564e50d50dcf284/：快速入门第一页

试着改变一下示例代码中变量data的内容，体会一下数据驱动 的含义。

数据可视化与d3.js

将数据以图形的方式表现出来，这个过程就是数据可视化。

没错，一图胜千言。咱们很难从枯燥的数字中发现规律与异常，但很善于从图形 中发现模式。随着人类所拥有数据规模的日益扩大，数据可视化逐渐成为一个重要 的不可或缺的技术手段。

d3.js是一个优秀的数据可视化库，可让咱们方便快捷地实现数据到图形的变换。 不过，在开始后续的教程以前，先打个预防针，但愿你不要误解d3.js ：

• d3.js不是一个图形绘制库

不少人惊诧于这一点，但不得不提。d3依赖于标准的web技术来绘制可视化元素，好比 HTML、SVG、CSS。使用d3须要咱们对这些标准技术有基础的了解。

• d3.js是一个基于集合概念的DOM操做库

d3不是图形绘制库，但它对DOM操做进行了封装。和jQuery相似，d3依赖于选择符选 中一组元素，创建一个集合，而后使用集合对象的方法操做DOM。

• d3.js的大量功能集中在数据处理方面

要将数据映射到图形，有不少琐碎的工做，好比数据范围的变换、插值的计算、布局的 计算等等。d3.js的大量功能是集中在这样的数据处理方面的。

• d3.js的核心是对数据和可视化元素的匹配

d3将数据可视化抽象为数据与可视化元素的匹配，一个数据对应一个可视化元素，一个 数值对应一个可视化元素的属性。d3封装了这个匹配的复杂过程，让咱们得以简单的 经过声明数据和可视化元素来完成数据可视化的任务。

d3的四把斧：hello,d3

在HTML文件中引入d3.js后，咱们就得到了一个全局变量：d3。d3.js 的功能就经过这个对象暴露出来。

咱们使用d3的API重写前面的示例，代码已经预置到→_→。

这个例子展现了d3.js实现数据可视化的典型理念：基于集合运算的 声明式数据可视化。

请你注意上图中使用d3时经典的四把斧：d3老是要求使用者声明两个集合：DOM对象集和数据集， 并根据集合运算实施数据与DOM对象的匹配，最后经过修改匹配的DOM对象来得到 可视化的效果。

d3第1斧：声明DOM对象集

d3的数据可视化流程老是从选中一组DOM元素创建一个集合对象开始。 在示例中，咱们经过：

1. var selection1 = d3.select("#barChart").selectAll(".bar");

试图在文档DOM树中选择div#barChart中的全部div.bar。 咱们将这一步返回的DOM集合保存到变量selection1中。

你应该会注意到，这是一个空集合！

这有点意思。

• d3容许声明一个空集合

在jQuery中，若是咱们的选择符没有选中任何HTML元素，那么后面的全部操做都没有意义了。 可是，d3容许咱们选不中任何元素来来创建一个空集合。

由于，d3还有第2斧，用数据来影响这个空集合。

size()方法返回集合中全部DOM元素的数量。在→_→的示例中，你能够看到，selection1 确实是一个空集合：它有0个DOM元素。

d3第2斧：声明数据集

咱们在第一步返回的selection1上执行data()方法声明要展现的数据：

1. var selection2 = selection1.data(data);

咱们知道这个数据集不是空的，它有8个数据项。在这一步，d3将数据集和DOM 对象集进行比较，返回一个新的集合selection2。

咱们看到，selection2的DOM元素数量也是0。

匹配计算

data()方法执行时对数据集和DOM元素集进行了匹配计算， 直接返回的结果就是两个集合的共有部分。因为DOM元素集是空的，因此结 果必定也没有任何DOM元素：

可是，匹配计算的结果有两个重要的方法，让咱们能够得到数据集合DOM元素集的 差别在哪里：

• enter() : 得到数据集中比DOM元素集中多出来的数据
• exit() ：得到DOM元素集中比数据集中多出来的数据

示例（http://***/course/54fd40cfe564e50d50dcf284/：快速入门第五页）显示了经过data()操做，目前得到的选择集中成员数目仍是0。

d3第3斧：得到结果集

继续使用集合的enter()方法，咱们能够获取缺失的DOM对象集合（以数据集为 对比基准）：

1. var selection3 = selection2.enter();

因为原始DOM集合为空，而数据集有8项，那么selection3中也将有8项描述8个缺失的 DOM对象：

d3第4斧：实施DOM操做

使用集合的append()方法，咱们建立缺失的DOM对象：

1. var selection4 = selection3.append("div");

这时selection4已是有8个div元素的集合了，在这个集合上咱们使用text() 方法设置每一个元素的文本内容：

1. selection4.text(function(d){return d;});

你注意到text()方法的参数是一个函数！让我解释一下。

selection4是一个集合，内有8个div元素，咱们通过以前的三斧，这每一个元素都已经有对应 的数据了（d3负责管理其对应关系），好比，第一个DIV元素对应的是10，第二个DIV元素对应 的是15......

每当集合的方法被调用时，它都检查传入的参数，若是传入的参数是一个函数，d3就对集 合中的每一个DOM元素执行一次这个函数，并传入这个DOM元素对应的数据。

咱们接着使用classed()方法设置每一个元素的CSS类为"bar"：

1. selection4.classed("bar",true)

最后使用width()方法使用每一个元素对应的数据，设置其宽度。这个能够理解了吧？

参考资料：http://***/