簡單例子
在這個例子中，你將會使用D3.js來將數據綁定到DOM元素上。然后再使用D3.js利用綁定到DOM元素上的數據來更新網頁。
在上一章中，我們以下面這個頁面作為開始的：
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>
然后我們又使用JavaScript控制台把數據綁定到HTML元素上：
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");
於是，我們得到了：
到此——我們已經把數據綁定到DOM元素上了。
然而，我們真正想要的是取回我們的數據，並把它們顯示在我們的初始網頁示例。
換句話說，我們如何取出DOM元素的值？
打開Chrome的開發者工具，打開JavaScript控制台和元素查閱器（element inspector）。
在控制台上輸入下面這段代碼：
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(function(d){return d})
然后我們得到：
正如你所看到——我們現在看到了三個包含了我們數據的段落，而不是三個內容是Hello的段落！那么，現在又要說祝賀啦——你現在已經通過D3.js使用綁定到DOM元素上的數據更新了網頁！
D3.js 的text操作符回顧
我們可以看到Javascript代碼中只有一個地方發生了變化：
1 .text("hello");
變為：
1 .text(function(d){return d;});
不論改變前后，.text()操作符作用的選集都是：
d3.select("body").selectAll("p")
.data(theData)
.enter()
.append("p")
這個選集就是三個HTML<p>元素。
正如我們在上一章中提到的，text操作符為所有選中的元素的textContent屬性賦值。
但是，如果值傳遞的是一個函數（function），那么這些函數會按序對每一個元素進行計算。同時，這些函數返回值就用來作為元素的文本內容（text content）.
在我們的例子中，這就意味着，並非像之前把文本值設置為“hello”，函數對每一個元素，得到其_data_屬性並把它返回給text操作符，然后它把返回值賦值給元素的文本內容。
D3.js操作符中的JavaScript函數
我們傳遞到text操作符中的JavaScript函數是：
1 function(d){ return d; }
如果你對JavaScript函數不熟悉，這里有一個簡短的介紹：
1 function functionName(variableName){ 2 return variableName; 3 }
"function"操作符定義了一個名為“functionName”的函數，還有一個參數是變量variableName，最后函數返回這個變量。
如果沒有函數名（functionName），那么就叫做無名函數（anonymous function）。有時候，有的函數僅僅在一個地方使用，因此我們在聲明的時候，就把函數聲明為無名函數，這樣做可以簡化我們的代碼。在本例中，函數僅僅是在D3.js的text操作符的內部使用了：
1 .text(function (d) { return d; });
注意：我們的函數並不是只能有一行，也並不一定只能是一個簡單的返回，我們還可以讓函數這樣：
1 function (d){ 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）
在本例中：
1 .text( function ( d ) { return d; });
你可以看到變量d在無名函數中的可用變量。這個變量是由D3.js提供的的，該變量是對要處理的元素的_data_屬性的引用。
還有另外兩個D3.js提供的變量可以用，他們是：this和i。
this代表的是當前在處理的DOM元素。
i是指當前處理的HTML元素在已選元素選集中的索引值。值得注意的是，所有要處理的數據都是按照一定的次序。注意：i是從0開始的。這就意味着我們的數據集：
1 var theData = [1,2,3]
數據處理的順序是：”1“，”2“，最后是”3“。其中，”1“的i值是0，”2“的i值是1，”3“的i值是2。
我們可以在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(function(d,i){ 8 return "i = "+i+" d = "+d; 9 });
運行結果是：
索引值的可獲取也方便了很多事件的處理，比如說更改樣式、格式化（formatting）。