簡單例子
在這個例子中,你將會使用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)。