D3.js中data(), enter() 和 exit()的問(wèn)題詳解

2024-05-06 16:24:31

字體：大中小

供稿：網(wǎng)友

相信大多數(shù)人對(duì)D3.js并不陌生。這是一個(gè)由紐約時(shí)報(bào)可視化編輯 Mike Bostock與他斯坦福的教授和同學(xué)合作開(kāi)發(fā)的數(shù)據(jù)文件處理的JavaScript Library，全稱(chēng)叫做Data-Driven Documents，在d3.js中data(), enter() 和 exit()比較常見(jiàn)，下面給大家就這方面的知識(shí)給大家詳解

D3的應(yīng)用非常廣泛，現(xiàn)在成為了主流數(shù)據(jù)可視化工具之一。大家在剛接觸使用d3.js的時(shí)候，感到最吃力的地方是data(), enter(), exit()這幾個(gè)操作。

在我接觸一段時(shí)間，有了一些了解之后，簡(jiǎn)單說(shuō)說(shuō)我的理解。

data()

先看一個(gè)例子：

<body>







</body>

執(zhí)行代碼：

d3.select("body").selectAll("p").data([1, 2, 3])

這里，data()是用來(lái)綁定數(shù)據(jù)到選擇的DOM元素上.這樣以后，就可以針對(duì)這些數(shù)據(jù)做一些相關(guān)操作，比如設(shè)置元素寬度等。

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

enter()和exit()

這兩個(gè)操作令人困惑是因?yàn)閱螐拿稚峡矗茈y推斷出它們的作用。

在上面data()的例子中，我們的DOM元素和數(shù)據(jù)的個(gè)數(shù)是一樣的。但如果不一樣的話(huà)，我們?cè)撛趺崔k?

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

enter()

當(dāng)DOM數(shù)量少于data的數(shù)量，或者壓根一個(gè)都沒(méi)有的時(shí)候，我們一般會(huì)希望讓程序幫忙創(chuàng)建。

下面的例子，我們沒(méi)有事先提供DOM元素：

<body>

</body>

仍舊執(zhí)行：

d3.select("body").selectAll("p").data([1, 2, 3])

與上面例子不同的是，上面的例子中我們可以繼續(xù)執(zhí)行.style("width", "100px")等操作。但這里我們不能了，因?yàn)槲覀儧](méi)有選擇到DOM元素，需要先創(chuàng)建。

enter()是用來(lái)在綁定數(shù)據(jù)之后，選擇缺少的那部分DOM元素。我們可能會(huì)疑惑，既然是缺少的部分，怎么選擇呢?這里就需要我們發(fā)揮一點(diǎn)想象力，想象我們選擇了一些不存在的東西。我們可以稱(chēng)之為“虛擬DOM”或“占位符(placeholder)”。

enter()只是進(jìn)行選擇，并未實(shí)際添加所需DOM元素。因此在enter()之后一般都會(huì)配合append()來(lái)進(jìn)行DOM元素的實(shí)際創(chuàng)建。

由此以來(lái)，我們使用 d3.select("body").selectAll("p").data([1, 2, 3]).enter().append("p") 即可根據(jù)數(shù)據(jù)自動(dòng)創(chuàng)建所需的DOM元素。

enter的處理方法

如果沒(méi)有足夠的元素，那么處理方法通常是使用append()添加元素。請(qǐng)看下面的代碼：

<body>



<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元素只有一個(gè)，但是數(shù)據(jù)有三個(gè)，因此enter部分包含多余的兩個(gè)數(shù)據(jù)。對(duì)多余數(shù)據(jù)的處理方法就是append元素，與之對(duì)應(yīng)。經(jīng)過(guò)處理后，body里有三個(gè)p元素，內(nèi)容分別為：

3

6

9

通常，從服務(wù)器讀取文件后，數(shù)據(jù)是有的，但是網(wǎng)頁(yè)中是沒(méi)有元素的。這是D3一個(gè)很重要的特性，即可以選擇一個(gè)空集，然后使用enter().append()的形式來(lái)插入元素。假設(shè)現(xiàn)在body里沒(méi)有p元素，請(qǐng)看如下代碼：

var dataset = [10,20,30,40,50];

var body = d3.select("body");

body.selectAll("p") //選擇body中所有p，但由于沒(méi)有p，所以選擇了一個(gè)空集

.data(dataset) //綁定dataset數(shù)組

.enter() //返回enter部分

.append("p") //添加p元素

.text(function(d){ return d; });

上述代碼中，selectAll選擇了一個(gè)空集，然后綁定了數(shù)據(jù)。由于選擇集為空，那么data()返回的update部分為空。然后調(diào)用enter()和append()，使得每一個(gè)數(shù)據(jù)都有元素p與之對(duì)應(yīng)。最后再更改p元素的內(nèi)容。即enter部分的常見(jiàn)處理方法是使用append()添加元素。

exit()

與enter()相反，exit()是用來(lái)選擇那些與數(shù)據(jù)相比多出來(lái)的DOM元素。

在下面例子中，我們多提供了一個(gè)DOM元素：

<body>









</body>

這回就容易理解了，因?yàn)槭嵌喑鰜?lái)的，那么就是實(shí)際存在的，即最后一個(gè)

。

多出來(lái)的話(huà)，我們可以接著用.remove()移除這些元素，代碼如下：

d3.select("body").selectAll("p").data([1, 2, 3]).exit().remove();

exit的處理方法

有多出的元素，沒(méi)有數(shù)據(jù)與之對(duì)應(yīng)。對(duì)于這樣的元素，通常的做法是使用remove()刪除元素。假設(shè)body中有5個(gè)p元素，請(qǐng)看如下代碼：

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();