我在剛接觸使用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元素。
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();