D3.js中data(), enter() 和 exit()的問題詳解_javascript技巧
- WBOY原創
- 2016-05-16 15:44:551117瀏覽
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>
這回就容易理解了，因為是多出來的，那麼就是實際存在的，也就是最後一個
。
多出來的話，我們可以接著用.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元素。
參考資料