DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> D3.js中data(), enter() 和 exit()的問題詳解
D3.js中data(), enter() 和 exit()的問題詳解
編輯:關於JavaScript     

D3的應用非常廣泛,現在成為了主流數據可視化工具之一。大家在剛接觸使用d3.js的時候,感到最吃力的地方是data(), enter(), exit()這幾個操作。

在我接觸一段時間,有了一些了解之後,簡單說說我的理解。

data()

先看一個例子:

<body>
 <p></p>
 <p></p>
 <p></p>
</body>

執行代碼:

d3.select("body").selectAll("p").data([1, 2, 3])

這裡,data()是用來綁定數據到選擇的DOM元素上.這樣以後,就可以針對這些數據做一些相關操作,比如設置元素寬度等。

從表面上,並不能看出什麼變化。但在內部,它是在對應的DOM元素上添加了一個__data__屬性,可以通過document.getElementsByTagName("p")[0].__data__看到。

enter()和exit()

這兩個操作令人困惑是因為單從名字上看,很難推斷出它們的作用。

在上面data()的例子中,我們的DOM元素和數據的個數是一樣的。但如果不一樣的話,我們該怎麼辦?

enter()和exit()就是用來處理這種情況的。

enter()

當DOM數量少於data的數量,或者壓根一個都沒有的時候,我們一般會希望讓程序幫忙創建。

下面的例子,我們沒有事先提供DOM元素:

<body>
</body>

仍舊執行:

d3.select("body").selectAll("p").data([1, 2, 3])

與上面例子不同的是,上面的例子中我們可以繼續執行.style("width", "100px")等操作。但這裡我們不能了,因為我們沒有選擇到DOM元素,需要先創建。

enter()是用來在綁定數據之後,選擇缺少的那部分DOM元素。我們可能會疑惑,既然是缺少的部分,怎麼選擇呢?這裡就需要我們發揮一點想象力,想象我們選擇了一些不存在的東西。我們可以稱之為“虛擬DOM”或“占位符(placeholder)”。

enter()只是進行選擇,並未實際添加所需DOM元素。因此在enter()之後一般都會配合append()來進行DOM元素的實際創建。

由此以來,我們使用 d3.select("body").selectAll("p").data([1, 2, 3]).enter().append("p") 即可根據數據自動創建所需的DOM元素。

enter的處理方法

如果沒有足夠的元素,那麼處理方法通常是使用append()添加元素。請看下面的代碼:

<body> 
  <p></p> 
  <script> 
  var dataset = [3, 6, 9]; 
  var p = d3.select("body").selectAll("p"); 
//綁定數據後,分別獲取update和enter部分 
  var update = p.data(dataset); 
  var enter = update.enter();   
//update部分的處理方法是直接修改內容 
  update.text( function(d){ return d; } ); 
//enter部分的處理方法是添加元素後再修改內容 
  enter.append("p") 
   .text(function(d){ return d; }); 
  </script> 
 </body> 

 本例中,body中的p元素只有一個,但是數據有三個,因此enter部分包含多余的兩個數據。對多余數據的處理方法就是append元素,與之對應。經過處理後,body裡有三個p元素,內容分別為:

<p>3</p> 
<p>6</p> 
<p>9</p> 

通常,從服務器讀取文件後,數據是有的,但是網頁中是沒有元素的。這是D3一個很重要的特性,即可以選擇一個空集,然後使用enter().append()的形式來插入元素。假設現在body裡沒有p元素,請看如下代碼:

var dataset = [10,20,30,40,50]; 
var body = d3.select("body"); 
body.selectAll("p") //選擇body中所有p,但由於沒有p,所以選擇了一個空集 
 .data(dataset)  //綁定dataset數組 
 .enter()   //返回enter部分 
 .append("p")  //添加p元素 
 .text(function(d){ return d; }); 

上述代碼中,selectAll選擇了一個空集,然後綁定了數據。由於選擇集為空,那麼data()返回的update部分為空。然後調用enter()和append(),使得每一個數據都有元素p與之對應。最後再更改p元素的內容。即enter部分的常見處理方法是使用append()添加元素。

exit()

與enter()相反,exit()是用來選擇那些與數據相比多出來的DOM元素。

在下面例子中,我們多提供了一個DOM元素:

<body>
 <p></p>
 <p></p>
 <p></p>
 <p></p>
</body>

這回就容易理解了,因為是多出來的,那麼就是實際存在的,即最後一個<p>。

多出來的話,我們可以接著用.remove()移除這些元素,代碼如下:

d3.select("body").selectAll("p").data([1, 2, 3]).exit().remove();

exit的處理方法

有多出的元素,沒有數據與之對應。對於這樣的元素,通常的做法是使用remove()刪除元素。假設body中有5個p元素,請看如下代碼:

var dataset = [10, 20, 30]; 
 var p = d3.select("body").selectAll("p"); 
//綁定數據之後,分別獲取update部分和exit部分 
 var update = p.data(dataset); 
 var exit = update.exit(); 
//update的部分的處理方法是修改內容 
 update.text( function(d){ return d; } ); 
//exit部分的處理方法是刪除 
 exit.remove(); 

這段代碼中,對於exit部分的處理方法是刪除。刪除之後,網頁中將不會有多余的p元素。

參考資料

"Thinking with Joins" - by Mike Bostock

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved