D3.js 理解 Update、Enter、Exit

Update、Enter、Exit 是 D3 中三個很是重要的概念，它處理的是當選擇集和數據的數量關係不肯定的狀況。

 

 

 

1、什麼是 Update、Enter、Exit

svg.selectAll("rect")   //選擇svg內全部的矩形
    .data(dataset)      //綁定數組
    .enter()            //指定選擇集的enter部分
    .append("rect")     //添加足夠數量的矩形元素

　　這段代碼使用的狀況是當如下狀況出現的時候：有數據，而沒有足夠圖形元素的時候，使用此方法能夠添加足夠的元素。

　　假設，在 body 中有三個 p 元素，有一數組 [3, 6, 9]，則能夠將數組中的每一項分別與一個 p 元素綁定在一塊兒。

　　可是，有一個問題：當數組的長度與元素數量不一致（數組長度 > 元素數量 or 數組長度 < 元素數量）時呢？這時候就須要理解 Update、Enter、Exit 的概念。

　　若是數組爲 [3, 6, 9, 12, 15]，將此數組綁定到三個 p 元素的選擇集上。能夠想象，會有兩個數據沒有元素與之對應，這時候 D3 會創建兩個空的元素與數據對應，這一部分就稱爲Enter。

　　而有元素與數據對應的部分稱爲 Update。

　　若是數組爲 [3]，則會有兩個元素沒有數據綁定，那麼沒有數據綁定的部分被稱爲 Exit。示意圖以下所示。

　　

 

 

 

2、Update 和 Enter 的使用

　　當對應的元素不足時 （ 綁定數據數量 > 對應元素 ），須要添加元素（append）。

　　如今 body 中有三個 p 元素，要綁定一個長度大於 3 的數組到 p 的選擇集上，而後分別處理 update 和 enter 兩部分。

var dataset = [ 3 , 6 , 9 , 12 , 15 ];

//選擇body中的p元素
var p = d3.select("body").selectAll("p");

//獲取update部分
var update = p.data(dataset);

//獲取enter部分
var enter = update.enter();

//update部分的處理：更新屬性值
update.text(function(d){
    return "update " + d;
});

//enter部分的處理：添加元素後賦予屬性值
enter.append("p")
    .text(function(d){
        return "enter " + d;
    });

　　結果以下圖，update 部分和 enter 部分被綁定的數據很清晰地表示了出來。

　　　

　　請你們記住：

• • update 部分的處理辦法通常是：更新屬性值
  • enter 部分的處理辦法通常是：添加元素後，賦予屬性值

 

 

3、Update 和 Exit 的使用

　　當對應的元素過多時 （ 綁定數據數量 < 對應元素 ），須要刪掉多餘的元素。

　　如今 body 中有三個 p 元素，要綁定一個長度小於 3 的數組到 p 的選擇集上，而後分別處理 update 和 exit 兩部分。

var dataset = [ 3 ];

//選擇body中的p元素
var p = d3.select("body").selectAll("p");

//獲取update部分
var update = p.data(dataset);

//獲取exit部分
var exit = update.exit();

//update部分的處理：更新屬性值
update.text(function(d){
    return "update " + d;
});

//exit部分的處理：修改p元素的屬性
exit.text(function(d){
        return "exit";
    });

//exit部分的處理一般是刪除元素
// exit.remove();

　　結果以下，請你們區分好 update 部分和 exit 部分。這裏爲了代表哪一部分是 exit，並無刪除掉多餘的元素，但實際上 exit 部分的絕大部分操做是刪除。

　　

　　請你們記住：

• • exit 部分的處理辦法通常是：刪除元素（remove）