1. 程式人生 > >D3.js update 、enter與exit的使用

D3.js update 、enter與exit的使用

若有如下程式碼:

var p = d3.select("body").selectAll("p"); 
//獲取update部分
var update = p.data(dataset); 
//獲取enter部分
var enter = update.enter(); 
var exit = update.exit();

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

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

//=============移除html元素=====================
exit.remove();
  • update 表示既擁html頁面元素,又擁有資料;常常用於更新
  • enter 表示無html頁面元素,擁有資料;常常用於新增資料;
  • exit表示只擁有元素未能擁有資料,常用用於頁面元素的批量刪除
  • 元素、資料的update、enter、exit關係對應圖