D3的應用非常廣泛，現(xiàn)在成為了主流數(shù)據(jù)可視化工具之一。大家在剛接觸使用d3.js的時候，感到最吃力的地方是data(), enter(), exit()這幾個操作。
在我接觸一段時間，有了一些了解之后，簡單說說我的理解。
data()
先看一個例子：
<body> <p></p> <p></p> <p></p></body>
執(zhí)行代碼：
d3.select("body").selectAll("p").data([1, 2, 3])這里，data()是用來綁定數(shù)據(jù)到選擇的DOM元素上.這樣以后，就可以針對這些數(shù)據(jù)做一些相關操作，比如設置元素寬度等。
從表面上，并不能看出什么變化。但在內(nèi)部，它是在對應的DOM元素上添加了一個__data__屬性，可以通過document.getElementsByTagName("p")[0].__data__看到。
enter()和exit()
這兩個操作令人困惑是因為單從名字上看，很難推斷出它們的作用。
在上面data()的例子中，我們的DOM元素和數(shù)據(jù)的個數(shù)是一樣的。但如果不一樣的話，我們該怎么辦？
enter()和exit()就是用來處理這種情況的。
enter()
當DOM數(shù)量少于data的數(shù)量，或者壓根一個都沒有的時候，我們一般會希望讓程序幫忙創(chuàng)建。
下面的例子，我們沒有事先提供DOM元素：
<body></body>
仍舊執(zhí)行：
d3.select("body").selectAll("p").data([1, 2, 3])與上面例子不同的是，上面的例子中我們可以繼續(xù)執(zhí)行.style("width", "100px")等操作。但這里我們不能了，因為我們沒有選擇到DOM元素，需要先創(chuàng)建。
enter()是用來在綁定數(shù)據(jù)之后，選擇缺少的那部分DOM元素。我們可能會疑惑，既然是缺少的部分，怎么選擇呢？這里就需要我們發(fā)揮一點想象力，想象我們選擇了一些不存在的東西。我們可以稱之為“虛擬DOM”或“占位符(placeholder)”。
enter()只是進行選擇，并未實際添加所需DOM元素。因此在enter()之后一般都會配合append()來進行DOM元素的實際創(chuàng)建。
由此以來，我們使用 d3.select("body").selectAll("p").data([1, 2, 3]).enter().append("p") 即可根據(jù)數(shù)據(jù)自動創(chuàng)建所需的DOM元素。
enter的處理方法
如果沒有足夠的元素，那么處理方法通常是使用append()添加元素。請看下面的代碼：
<body> <p></p> <script> var dataset = [3, 6, 9]; var p = d3.select("body").selectAll("p"); //綁定數(shù)據(jù)后，分別獲取update和enter部分 var update = p.data(dataset); var enter = update.enter(); //update部分的處理方法是直接修改內(nèi)容 update.text( function(d){ return d; } ); //enter部分的處理方法是添加元素后再修改內(nèi)容 enter.append("p") .text(function(d){ return d; }); </script> </body> 本例中，body中的p元素只有一個，但是數(shù)據(jù)有三個，因此enter部分包含多余的兩個數(shù)據(jù)。對多余數(shù)據(jù)的處理方法就是append元素，與之對應。經(jīng)過處理后，body里有三個p元素，內(nèi)容分別為：
<p>3</p> <p>6</p> <p>9</p>
通常，從服務器讀取文件后，數(shù)據(jù)是有的，但是網(wǎng)頁中是沒有元素的。這是D3一個很重要的特性，即可以選擇一個空集，然后使用enter().append()的形式來插入元素。假設現(xiàn)在body里沒有p元素，請看如下代碼：
var dataset = [10,20,30,40,50]; var body = d3.select("body"); body.selectAll("p") //選擇body中所有p，但由于沒有p，所以選擇了一個空集 .data(dataset) //綁定dataset數(shù)組 .enter() //返回enter部分 .append("p") //添加p元素 .text(function(d){ return d; }); 上述代碼中，selectAll選擇了一個空集，然后綁定了數(shù)據(jù)。由于選擇集為空，那么data()返回的update部分為空。然后調(diào)用enter()和append()，使得每一個數(shù)據(jù)都有元素p與之對應。最后再更改p元素的內(nèi)容。即enter部分的常見處理方法是使用append()添加元素。
exit()
與enter()相反，exit()是用來選擇那些與數(shù)據(jù)相比多出來的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的處理方法
有多出的元素，沒有數(shù)據(jù)與之對應。對于這樣的元素，通常的做法是使用remove()刪除元素。假設body中有5個p元素，請看如下代碼：
var dataset = [10, 20, 30]; var p = d3.select("body").selectAll("p"); //綁定數(shù)據(jù)之后，分別獲取update部分和exit部分 var update = p.data(dataset); var exit = update.exit(); //update的部分的處理方法是修改內(nèi)容 update.text( function(d){ return d; } ); //exit部分的處理方法是刪除 exit.remove(); 這段代碼中，對于exit部分的處理方法是刪除。刪除之后，網(wǎng)頁中將不會有多余的p元素。
參考資料
新聞熱點
疑難解答
