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

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

data()

先看一個例子：

執行代碼：

這里，data()是用來綁定數據到選擇的DOM元素上.這樣以后，就可以針對這些數據做一些相關操作，比如設置元素寬度等。

從表面上，并不能看出什么變化。但在內部，它是在對應的DOM元素上添加了一個__data__屬性，可以通過document.getElementsByTagName("p")[0].__data__看到。

enter()和exit()

這兩個操作令人困惑是因為單從名字上看，很難推斷出它們的作用。

在上面data()的例子中，我們的DOM元素和數據的個數是一樣的。但如果不一樣的話，我們該怎么辦？

enter()和exit()就是用來處理這種情況的。

enter()

當DOM數量少于data的數量，或者壓根一個都沒有的時候，我們一般會希望讓程序幫忙創建。

下面的例子，我們沒有事先提供DOM元素：

仍舊執行：

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

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

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

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

推薦度：

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