【 D3.js 入門系列 --- 7 】理解 update, enter, exit 的使用

時間 2019-11-08

標籤 d3.js 入門系列理解 update enter exit 使用欄目 JavaScript 简体版

原文原文鏈接

在前面幾節中反覆出現了以下代碼：javascript

[javascript] view plain copy

svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")

當所選擇的 rect 數量比綁定的數據 dataset 的數量少的時候，一般會用到以上代碼，這一節就詳細說說當被選擇元素和數據數量不一致時該如何處理。java

這一節將涉及到三個函數。app

1. update() 當對應的元素正好知足時（綁定數據數量 = 對應元素）svg

實際上並不存在這樣一個函數，只是爲了要與以後的 enter 和 exit 一塊兒說明纔想象有這樣一個函數。但對應元素正好知足時，直接操做便可，後面直接跟 text ，style 等操做便可。函數

2. enter() 當對應的元素不足時 （綁定數據數量 > 對應元素）spa

當對應的元素不足時，一般要添加元素，使之與綁定數據的數量相等。後面一般先跟 append 操做。.net

3. exit() 當對應的元素過多時（綁定數據數量 < 對應元素）blog

當對應的元素過多時，一般要刪除元素，使之與綁定數據的數量相等。後面一般要跟 remove 操做。ip

下面看看具體的用法：utf-8

[javascript] view plain copy

<body>
<p>AAAAAAAAA</p>
<p>BBBBBBBBB</p>
<p>CCCCCCCCC</p>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var dataset = [ 10 , 20 , 30 , 40 , 50 ];
var update = d3.select("body").selectAll("p").data(dataset);
var enter = update;
update.text(function(d,i){
return "update " + d;
});
enter.enter()
.append("p")
.text(function(d,i){
return "enter " + d;
});
</script>
</body>

上面的代碼分別用了變量名 update 和 enter 來表示各自的部分，上面的代碼的結果爲：

結果圖能夠看到新添加的元素 enter 的部分。

改一部分代碼，看看怎麼用 exit 。

[javascript] view plain copy

var dataset = [ 10 , 20 ];
var update = d3.select("body").selectAll("p").data(dataset);
var exit = update;
update.text(function(d,i){
return "update " + d;
});
exit.exit()
.text(function(d,i){
return "exit";
});

結果圖爲：

能夠看到，調用 exit() 函數後，其實是返回沒有對應數據的元素。一般咱們能夠刪除掉多餘的元素，如：

[javascript] view plain copy

exit.exit()
.remove();

尤爲以 enter 函數的使用最爲多見。由於一般用 D3 作數據可視化時，咱們都擁有須要的數據，並且數據量巨大，文檔中不多有足夠數量的與之對應的元素。因此要特別熟練 enter 的使用方法

本文來自：

博客爲： www.ourd3js.com

csdn博客爲： blog.csdn.net/lzhlzz

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

【 D3.js 入門系列 --- 7 】 理解 update, enter, exit 的使用

【 D3.js 入門系列 --- 7 】理解 update, enter, exit 的使用