牛逼的js--就是d3.js

接触d3.js是因为leader让我研究它并运用到新项目开发中去，所以就花时间了解了一下。写下此文来和大家分享学习，如有不足，欢迎指正。

首先，说下我对d3.js的理解。

d3其实就是一个框架，就像是juery一样，封装一些功能。

d3全称：Data-Driven Documents,是一个JavaScript库,用于操纵基于数据的文档。D3帮助你通过使用HTML、SVG和CSS给数据带来活力。D3强调web标准，给你提供现代浏览器的各种能力，而不是把你束缚在专有的框架中,结合强大的可视化组件和数据驱动方式的DOM操作。

下载最新版本：d3.v3.zip

或者,直接链接到最新版本,复制这个代码片段:

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></scrip>

1.介绍　　 LEARN MORE

　 D3允许您绑定任意数据到一个文档对象模型(DOM),然后采用数据驱动转换成文档。例如,您可以使用D3把一个数字数组生成一个HTML表。或者,使用相同的数据通过平稳的过渡和交互，创建一个交互式SVG条形图。　　　　

D3不是旨在提供功能的单一框架。相反,D3解决了问题的症结所在:有效的基于数据操纵文档，展现了web标准(如HTML5和CSS3,SVG）的完整功能。D3用最快的速度，最小的开销,支持大型数据集、动态行为交互和动画。D3通过整合不同的组件和插件，允许代码重用。

2.选择(Selections) LEARN MORE Selections

传统的修改文件的方法很乏味:方法名冗长,命令需要手动迭代，记住临时状态等。例如,改变文本颜色的段落元素:

var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
  var paragraph = paragraphs.item(i);
  paragraph.style.setProperty("color", "white", null);
}

而d3则可以声明方法来选择操作任意组节点。

例如,您可以重写上述循环:

d3.selectAll("p").style("color", "white");

也可以根据需要操作单独的节点：

d3.select("body").style("background-color", "black");

选择器支持本地的现代浏览器,向后兼容老式浏览器可以通过 Sizzle。上面的示例选择节点的标签名称(分别为“p”和“body”)。可以使用包括容器、属性值、类和ID来作为选择元素。　　　　

D3提供了许多方法来改变节点:设置属性，注册事件侦听器，添加、移除或排序节点，改变HTML或文本内容。直接访问底层DOM也是可能的,因为每个D3只是选择一组节点。

3.动态属性（Dynamic Properties）

读者若是熟悉其他DOM框架，如jquery，应该能很快发现与D3的相似性。然而，在D3中样式、属性和其他参数都可以被指定为函数的数据，而不仅仅是简单的常量。D3提供了很多内置的可重用函数和函数工厂,如绘制图形（ graphical primitives）、线和饼图。这点很像HTML5的一些新特性。

例如,给段落随机赋予颜色:

d3.selectAll("p").style("color", function() {
  return "hsl(" + Math.random() * 360 + ",100%,50%)";
});

或通奇偶数选择：

d3.selectAll("p").style("color", function(d, i) {
  return i % 2 ? "#fff" : "#eee";
});

计算属性经常涉及数据绑定。data被定义为一个数组的值,每个值作为第一个参数传递(d)来选择函数（对D3来说d是一个很重要的参数）。通过默认索引,数据中的第一个数组元素传递到第一个节点的选择,第二个元素到第二个节点,等等。例如,如果给段落元素绑定一组数,您可以使用这些数据来计算动态字体大小:

d3.selectAll("p")
    .data([4, 8, 15, 16, 23, 42])
    .style("font-size", function(d) { return d + "px"; });

一旦数据被绑定到文档,就可以省去数据操作，D3将检索以前绑定的数据，这允许你可以再计算属性而不需要重新连接。

4.输入和输出(Enter and Exit) LEARN MORE Enter and Exit

使用D3的输入和输出的选择,您不再需要创建新的节点来输入数据和删除外溢节点。当选择数据绑定时,则数组中的每个元素与选择的节点对应。如果节点比数据少,则额外的数据元素形成输入选择,您可以通过附加输入选择进行实例化。例如:

d3.select("body").selectAll("p")
    .data([4, 8, 15, 16, 23, 42])
  .enter().append("p")
    .text(function(d) { return "I’m number " + d + "!"; });

更新节点是默认操作数据选择的结果。因此,如果你忘记了输入和输出的选择,将自动选择存在对应数据的元素。

初始化选择分成三个部分:修改更新节点,添加输入节点和删除输出节点。

// Update…
var p = d3.select("body").selectAll("p")
    .data([4, 8, 15, 16, 23, 42])
    .text(String);

// Enter…
p.enter().append("p")
    .text(String);

// Exit…
p.exit().remove();

通过这三种情况的处理,你可以具体说明哪些操作运行在哪些节点。这可以通过转换提高性能和控制。例如,有一个条形图，你可能会用旧的规模初始化输入条形，然后随着更新和输出条形，过渡输入条形到新的规模。

D3让您基于数据转换文档，这包括创建和销毁元素。D3允许你改变一个现有的文档以响应用户交互、超时动画,甚至来自第三方的一个异步通知。

5. 过渡(Transitions)

过渡随着时间逐渐插入styles 和 attributes ，可以通过像“elastic”,“cubic-in-out”,“linear”等功能来控制渐变。

例如，渐变背景色为黑色。

d3.select("body").transition()
    .style("background-color", "black");

又或者，在一个符号图中通过交错延迟来调整圆的大小。

d3.selectAll("circle").transition()
    .duration(750)
    .delay(function(d, i) { return i * 10; })
    .attr("r", function(d) { return Math.sqrt(d * scale); });

牛逼的js--就是d3.js

悦读