D3.js——理解 update, enter, exit 的使用
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)