Update、Enter、Exit 是 D3 中三個非常重要的概念，它處理的是當選擇集和資料的數量關係不確定的情況。

什麼是 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

看到這，我想大家能體會到為什麼本節最開始處的程式碼能夠給 SVG 內新增足夠數量的元素了吧。它的意思其實是：

此時 SVG 裡沒有 rect 元素，即元素數量為 0。有一陣列 dataset，將陣列與元素數量為 0 的選擇集繫結後，選擇其 Enter 部分（請仔細看上圖），然後新增（append）元素，也就是新增足夠的元素，使得每一個數據都有元素與之對應。

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 部分的處理辦法一般是：新增元素後，賦予屬性值

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）