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关系对应图

猜你喜欢

转载自blog.csdn.net/u012846041/article/details/83007774
今日推荐