D3.js學習筆記(二)——使用綁定在DOM上的數據


簡單例子

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

  於是,我們得到了:

revisited

  到此——我們已經把數據綁定到DOM元素上了。

  然而,我們真正想要的是取回我們的數據,並把它們顯示在我們的初始網頁示例。

  換句話說,我們如何取出DOM元素的值?

I want you

  打開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})

  然后我們得到:

function

  正如你所看到——我們現在看到了三個包含了我們數據的段落,而不是三個內容是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控制台,運行后得到:

addedNumber

  正如你所看到的,我們的函數給我們的數據集都加了2,然后更新為DOM元素的文本內容。

  使用函數,你可以通過Javascript操縱數據,輸出你想要的任何內容。在數據可視化中,當你向往根據數據值得不同來讓SVG對象的樣式和格式有所區別時,這一點就變得非常重要,也非常有用。

D3.js操作符內的可用變量(variable available)

  在本例中:

1 .text( function ( d ) { return d; });

  你可以看到變量d在無名函數中的可用變量。這個變量是由D3.js提供的的,該變量是對要處理的元素的_data_屬性的引用。

  還有另外兩個D3.js提供的變量可以用,他們是:thisi

  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     });

  運行結果是:

available variable

  索引值的可獲取也方便了很多事件的處理,比如說更改樣式、格式化(formatting)。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM