一、简介和安装
简介
D3 的全称是（Data-Driven Documents），顾名思义可以知道是一个被数据驱动的文档。D3.js是一个基于数据处理文档的JavaScript库。D3帮助我们使用HTML，SVG和CSS将数据带入生活。D3强调网络标准，可以让您充分利用现代浏览器的功能，而无需将自己绑定到专有框架，将强大的可视化组件和数据驱动的方法结合到DOM操作中。
安装使用
1：下载d3.js文件：http://github.com/mbostock/d3/releases/download/v3.4.8/d3.zip
将其文件解压之后，放置你对应js文件夹中即可；
2：直接引用js文件：
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>二、学习D3.js
-
DOM上的数据绑定
先看个简单的例子：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="d3.v3.min.js"></script>
</head>
<body>
<script>
var data = [1,2,3];
var p = d3.select("body").selectAll("p")
.data(data)
.enter()
.append("p")
.text("hello");
</script>
</body>
</html>很好，现在已经成功使用D3.js把一些数据绑定到了Dom元素上了！
d3.select ——从当前文档中选择一个元素。
d3.selectAll ——从当前文档选择多个元素。
D3.js中的selectAll方法使用的是CSS3中的选择器来获取DOM元素，不同于select方法。但是上述的html网页中并没有p标签，也就是说该方法返回的是一个空的选择结果。因此我们使用 .data()和.enter()把数据绑定到了这个空的选择结果中去。
D3.js中的.data是把一个数据数组与当前的选择结果联系起来。在上面的例子中，并没有提供key值，因此数组中的每个元素都被分配到当前选择结果中的一个元素上。数组中第一个元素，也就是数字1，被分配到第一个p元素，以此类推。
但是，正如上面所说的，初始网页中根本就没有p标签，那如何如添加呢？这就需要提到D3.js的Virtual Selections。与D3.js其他方法不同，.data操作符返回的是三个Virtual selection。这3个Virtual selection 是enter、update以及exit。
enter选集：对所有缺失的元素以占位符placeholder替代；
update选集：包含现有的元素，并绑定到数据；
剩下的元素最终都会出现在exit选集中，并被移除。
由于下面代码得到的选集是空的：
d3.select("body").selectAll("p")因此，虚拟enter选集中包含的是p元素的占位符。
然而D3.js的enter方法是从data操作符返回一个虚拟选集，这个方法只能作用于data操作符，因为data操作符返回的是三个虚拟选集。
var p = d3.select("body").selectAll("p")
.data(theData)
.enter()正如前面所述，对于数组中的数据元素，如果缺少与之对应的DOM元素，那么就会有一个占位符来顶替，而enter方法返回的就是这些占位符集合的引用。
得到这个引用之后，就能对这个集合操作了。需要注意的是，这个引用后只能连接append，insert以及select操作符，通过它们来操作引用所指向的集合。在这些操作链接到 .enter()选集，我们就可以像处理其他选集那样，来对其内容进行更改。
D3.js的Append操作符
var p = d3.select("body").selectAll("p")
.data(theData)
.enter()
.append("p")将.append()作用于.enter()选集之上。对于上一步中所产生的每个占位符，都有一个p元素插入进去。因为在数据中，有3个数据元素，但是在网页中，没有p元素，所以.append()就创建并加入了3个段落元素。当我们对.enter()的选集使用了append操作后，返回的是一个具有3个html段落元素的选集。
D3.js的text操作符
text操作符是对所有被选择的元素的textContent属性进行赋值。因此每个元素都加入了“hello”。
这就是最简单的操作，通过D3.js进行对DOM元素的操作。
来源：oschina
链接：https://my.oschina.net/u/3723389/blog/1570046