开始学习D3.js，网上没有找到很满意的中文教程，但是发现了一个很好的英文教程，讲解的非常详细。从一个初始简单的HTML网页开始，逐步加入D3.js的应用，几乎是逐句讲解。学习的时候，就顺便翻译成中文，来和大家分享 。当然，更推荐看英文原文教程了，点击这里。
简单例子
在这个例子中，你将会使用D3.js来把数据绑定到简单网页的DOM元素(DOM element)上。
现在开始了！下面是一个简单的HTML网页：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script type="text/javascript" src="d3.v3.min.js"></script> 5 </head> 6 <body> 7 </body> 8 </html>
打开Chrome的开发者工具进入JavaScript控制台，观察元素查阅器（inspector）。
在JavaScript控制台上输入下面这段代码：
1 var theData = [1,2,3] //一个数组 2 3 var p = d3.select("body").selectAll("p") 4 .data(theData) 5 .enter() 6 .append("p") 7 .text("hello");
结果如下：
恭喜你！你现在已经成功使用D3.js把一些数据绑定到了DOM元素上了！
D3.js 的 SelectAll 方法
在上面那段Javascript代码中，有一个方法是：.selectAll("p").
D3.js中的selectAll方法使用的是CSS3中的选择器来获取DOM元素。不同于select方法（该方法获取的是第一个目标元素），而selectAll方法选择的是所有匹配的元素。
但是！！初识的HTML网页中并不包含<p>，也就是说，该方法返回的是一个空的选择结果（selection）。
在此之后呢，我们又使用了.data(theData)和.enter()把数据绑定到这个空的选择结果中，这是怎么回事呢？
D3.js的data操作符(operator)
在上面那段Javascript代码中，接下来的是.data(theData)。
这个data操作符是把一个数据数组（可能是数值数组、对象数组或者别的什么数组）与当前的选择结果联系（join）起来。
在本例中，并没有提供key值，因此theData数组中的每一个元素都被分配到当前选择结果中的一个元素上。数组中第一个元素，也就是数字1，被分配到第一个<p>元素，第二个元素2被分配到相应的第二个<p>，以此类推。
但是！！正如上面说过的，初识网页中根本没有一个<p>，那么到底怎么回事？
D3.js的Virtual Selections
与D3.js中的其他方法不同的是，data操作符返回的是三个Virtual selection。
这三个virtual selection是enter,update以及exit。
enter选集：对所有缺失的元素以占位符placeholder替代。
update选集：包含现有的元素，并绑定到数据
剩下的元素最终都会出现在exit选集中，并被移除。
由于从下面代码得到的选集是空的：
1 d3.select("body").selectAll("p")
因此，虚拟enter选集中包含的是<p>元素的占位符。
我们将会的后面章节继续讨论虚拟选集enter,update,exit，而现在，我们就把焦点放在enter虚拟选集上。
如果想要了解更多虚拟选集(virtual selection)知识，这里推荐一篇经典文章：Mike Bostock 写的"Thinking with Joins"。
D3.js的enter方法
D3.js的enter方法从data操作符返回一个虚拟选集。这个方法只能作用于data操作符，因为只有data操作符返回的是三个虚拟选集。
1 var p = d3.select("body").selectAll("p") 2 .data(theData) 3 .enter()
正如前面所说，对于数组中的数据元素，如果缺少与之对应的DOM元素，那么就会有一个占位符来顶替，而enter方法返回的就是这些占位符集合的引用(reference)。
得到这个引用之后，就能对该集合操作了。
在这里需要特别注意的是，这个引用后只能链接(chaining)append，insert以及select操作符，通过他们来操作该引用所指向的集合。
在这些操作符链接到.enter()选集，我们就可以像处理其他选集那样，来对其内容进行更改。
D3.js的Append操作符
我们再次来看看这段代码：
1 var p = d3.select("body").selectAll("p") 2 .data(theData) 3 .enter() 4 .append("p")
我们把.append("p")作用于.enter()选集之上。
对上一步中所产生的每个占位符（placeholder），都有一个P元素插入进去。
由于在我们的数据数组中，有三个数据元素（1,2,3），但是在网页中，没有一个P元素，所以.append("p")就创建并加入了3个段落元素。
在本例中，当我们对.enter()的选集使用了append操作符之后，返回的是一个具有3个HTML段落元素的选集。
D3.js的text操作符
如果我们把之前那段Javascript代码做一改变，去掉text操作符：
1 var theData = [1,2,3] 2 3 var p = d3.select("body").selectAll("p") 4 .data(theData) 5 .enter() 6 .append("p");
我们得到的结果是：
我们注意到，与之前的那张图片相对比，这里的段落都是不包含任何文字的。
text操作符对所有被选择的元素的textContent属性进行赋值。
在本例中，.text("hello")，值是“hello”。因为我们的选集中有3个<p>元素，因此每个元素都被插入了“hello”。
数据到哪儿去了？
在本文的例子中，一开始就是一个Javascript的数据数组：
1 var theData = [1,2,3]
可是到最后，我们得到了三个内容是“hello”的段落。
那么对于数字1,2,3，发生了什么？
D3.js的data操作符回顾
让我们通过一个简单的例子，在javascript控制台中再次观察下data操作符：
1 console.log(d3.select("body"));
当我们点击回车，然后点击向下的箭头来查看“body”的属性，你看到的应该如下：
在0:<body>这一行下面，你可以看到HTML中body元素的属性。
现在，我们在Javascript控制台运行一下下面这句代码，我们加入了.data()操作符。
1 console.log(d3.select("body").data([1]));
我们的数据出现在名为_data_的属性中：
当我们把数据分配到一个元素上时，这个数据被存储到_data_属性中。
到此，数据可以通过_data_属性被再选。这也就是我们所说的数据绑定到Dom元素(Binding Data to Dom Elements)。
初始例子回顾
回顾我们在页面最上方提到的那个例子，现在我们使用console.log()来查看数据绑定到什么地方了：
1 var theData = [1,2,3] 2 3 var p = d3.select("body").selectAll("p") 4 .data(theData) 5 .enter() 6 .append("p") 7 .text("love") 8 9 console.log(p);
结果是：
从上图可以看出3个段落元素被添加。
你还会看到最后一个（第三个）段落元素的_data_属性值为3，这个值就是来自我们的数据集theData！
扫一扫
4364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
