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

data()

先看一個例子：

執(zhí)行代碼：

這里，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元素：

仍舊執(zhí)行：

與上面例子不同的是，上面的例子中我們可以繼續(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()添加元素。請看下面的代碼：

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

D3.js中data(),enter()和exit()的問題詳解_javascript技巧

D3.js中data(),enter()和exit()的問題詳解_javascript技巧:D3的應用非常廣泛，現(xiàn)在成為了主流數(shù)據(jù)可視化工具之一。大家在剛接觸使用d3.js的時候，感到最吃力的地方是data(), enter(), exit()這幾個操作。 在我接觸一段時間，有了一些了解之后，簡單說說我的理解。 data() 先看一個例子： 執(zhí)行代碼：

推薦度：

點擊下載本文 文檔為doc格式