简单例子
在这个例子中，你将会使用D3.js来将数据绑定到DOM元素上。然后再使用D3.js利用绑定到DOM元素上的数据来更新网页。
在上一章中，我们以下面这个页面作为开始的：
<span style="color: #008080;">1</span> <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
2 <html>
3 <head>
4 <script type=”text/javascript” src=”d3.v3.min.js”></script>
5 </head>
6 <body>
7 </body>
8 </html>
然后我们又使用JavaScript控制台把数据绑定到HTML元素上：
<span style="color: #008080;">1</span> <span style="color: #0000ff;">var</span> theData = [1,2,3<span style="color: #000000;">]</span>
2
3 var p = d3.select(“body”).selectAll(“p”)
4 .data(theData)
5 .enter()
6 .append(“p”)
7 .text(“hello”);
于是，我们得到了：
到此——我们已经把数据绑定到DOM元素上了。
然而，我们真正想要的是取回我们的数据，并把它们显示在我们的初始网页示例。
换句话说，我们如何取出DOM元素的值？
打开Chrome的开发者工具，打开JavaScript控制台和元素查阅器（element inspector）。
在控制台上输入下面这段代码：
<span style="color: #008080;">1</span> <span style="color: #0000ff;">var</span> theData = [1,2,3<span style="color: #000000;">]</span>
2
3 var p = d3.select(“body”).selectAll(“p”)
4 .data(theData)
5 .enter()
6 .append(“p”)
7 .text(function(d){return d})
然后我们得到：
正如你所看到——我们现在看到了三个包含了我们数据的段落，而不是三个内容是Hello的段落！那么，现在又要说祝贺啦——你现在已经通过D3.js使用绑定到DOM元素上的数据更新了网页！
D3.js 的text操作符回顾
我们可以看到Javascript代码中只有一个地方发生了变化：
<span style="color: #008080;">1</span> .text("hello");
变为：
<span style="color: #008080;">1</span> .text(<span style="color: #0000ff;">function</span>(d){<span style="color: #0000ff;">return</span> d;});
不论改变前后，.text()操作符作用的选集都是：
d3.select("body").selectAll("p"<span style="color: #000000;">)</span>
.data(theData)
.enter()
.append(“p”)
这个选集就是三个HTML<p>元素。
正如我们在上一章中提到的，text操作符为所有选中的元素的textContent属性赋值。
但是，如果值传递的是一个函数（function），那么这些函数会按序对每一个元素进行计算。同时，这些函数返回值就用来作为元素的文本内容（text content）.
在我们的例子中，这就意味着，并非像之前把文本值设置为“hello”，函数对每一个元素，得到其_data_属性并把它返回给text操作符，然后它把返回值赋值给元素的文本内容。
D3.js操作符中的JavaScript函数
我们传递到text操作符中的JavaScript函数是：
<span style="color: #008080;">1</span> <span style="color: #0000ff;">function</span>(d){ <span style="color: #0000ff;">return</span> d; }
如果你对JavaScript函数不熟悉，这里有一个简短的介绍：
<span style="color: #008080;">1</span> <span style="color: #0000ff;">function</span><span style="color: #000000;"> functionName(variableName){</span>
2 return variableName;
3 }
“function”操作符定义了一个名为“functionName”的函数，还有一个参数是变量variableName，最后函数返回这个变量。
如果没有函数名（functionName），那么就叫做无名函数（anonymous function）。有时候，有的函数仅仅在一个地方使用，因此我们在声明的时候，就把函数声明为无名函数，这样做可以简化我们的代码。在本例中，函数仅仅是在D3.js的text操作符的内部使用了：
<span style="color: #008080;">1</span> .text(<span style="color: #0000ff;">function</span> (d) { <span style="color: #0000ff;">return</span> d; });
注意：我们的函数并不是只能有一行，也并不一定只能是一个简单的返回，我们还可以让函数这样：
<span style="color: #008080;">1</span> <span style="color: #0000ff;">function</span><span style="color: #000000;"> (d){</span>
2 var addedNumber = 2;
3 var tempNumber;
4 //把输入数据加上2
5 tempNumber = d + addedNumber;
6 return tempNumber;
7 }
我们把上面的函数作为一个完整的D3.js函数放到JavaScript控制台，运行后得到：
正如你所看到的，我们的函数给我们的数据集都加了2，然后更新为DOM元素的文本内容。
使用函数，你可以通过Javascript操纵数据，输出你想要的任何内容。在数据可视化中，当你向往根据数据值得不同来让SVG对象的样式和格式有所区别时，这一点就变得非常重要，也非常有用。
D3.js操作符内的可用变量（variable available）
在本例中：
<span style="color: #008080;">1</span> .text( <span style="color: #0000ff;">function</span> ( d ) { <span style="color: #0000ff;">return</span> d; });
你可以看到变量d在无名函数中的可用变量。这个变量是由D3.js提供的的，该变量是对要处理的元素的_data_属性的引用。
还有另外两个D3.js提供的变量可以用，他们是：this和i。
this代表的是当前在处理的DOM元素。
i是指当前处理的HTML元素在已选元素选集中的索引值。值得注意的是，所有要处理的数据都是按照一定的次序。注意：i是从0开始的。这就意味着我们的数据集：
<span style="color: #008080;">1</span> <span style="color: #0000ff;">var</span> theData = [1,2,3]
数据处理的顺序是：”1“，”2“，最后是”3“。其中，”1“的i值是0，”2“的i值是1，”3“的i值是2。
我们可以在JavaScript控制台上运行下面这段代码来证明：
<span style="color: #008080;">1</span> <span style="color: #0000ff;">var</span> theData = [1,2,3<span style="color: #000000;">]</span>
2
3 var p = d3.select(“body”).selectAll(“p”)
4 .data(theData)
5 .enter()
6 .append(“p”)
7 .text(function(d,i){
8 return “i = “+i+” d = “+d;
9 });
运行结果是：
索引值的可获取也方便了很多事件的处理，比如说更改样式、格式化（formatting）。