D3中理解 data, enter, exit 的使用
阿新 • • 發佈：2019-01-28
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() 當對應的元素不足時 （ 繫結資料數量 > 對應元素 ）
當DOM數量少於data的數量，或者壓根一個都沒有的時候，我們一般會希望讓程式幫忙建立。
<body>
</body>執行：
d3.select("body").selectAll("p").data([1, 2, 3]); //沒反應與上面例子不同的是，上面的例子中我們可以繼續執行.style(“width”, “100px”)等操作。但這裡我們不能了，因為我們沒有選擇到DOM元素，需要先建立。
d3.select("body").selectAll("p").data enter()只是進行選擇，並未實際新增所需DOM元素。因此在enter()之後一般都會配合append()來進行DOM元素的實際建立。
exit() 當對應的元素過多時 （ 繫結資料數量 < 對應元素 ）
當對應的元素過多時，通常要刪除元素，使之與繫結資料的數量相等。後面通常要跟 remove 操作。
與enter()相反，exit()是用來選擇那些與資料相比多出來的DOM元素。
<body>
<p></p>
<p></p>
<p></p 我們可以接著用.remove()移除這些元素，程式碼如下：
d3.select("body").selectAll("p").data([1, 2, 3]).exit().remove();