理解Update、Enter、Exit 与 添加、删除元素
在使用data()绑定数据时，例如：现在我们有一个数组[3,6,9,12,15],我们可以将数组每一项与一个<p>绑定，但是，现在就有一个问题——数据集个数和选择集个数不匹配怎么办？这样就需要理解Update、Enter、Exit
通过以下图可以理解 Update、Enter、Exit
数组
[3,6,9,12,15]绑定到三个<p>上。可以想象到，数组的最后两个元素没有可以绑定的元素，这时D3会建立两个空的元素与数组最后的两个数据相对于，那么这部分就称为Enter。而有元素与数据对应的部分就称为Update如果数组[3]绑定到三个
<p>上，可以想象，最后两个<p>没有可绑定的数据，那么没有数据绑定的部分就称为Exit
Update与Enter的使用
<body>
<p>name1</p>
<p>name2</p>
<p>name3</p>
<script>
var dataset = [3,6,9,12,15];
var p = d3.selectAll("p");
var update = p.data(dataset)//绑定数据,并得到update部分
var enter = update.enter();//得到enter部分
//下面检验是否真的得到
//对于update的处理
// 匿名函数第一个参数 d 为每个元素所绑定的对应数据 data
// 匿名函数第一个参数 i 为每个元素的索引，从 0 开始递增
update.text(function(d,i){
return "update: "+d+",index: "+i;
})
//对于enter的处理
//注意，这里需要先添加足够多的<p>，然后在添加文本
var pEnter = enter.append("p")//添加足够多的<p>
pEnter.text(function(d,i){
return "enter: "+d+",index: "+i;
})
/*
运行结果如下：
update: 3,index: 0
update: 6,index: 1
update: 9,index: 2
enter: 12,index: 3
enter: 15,index: 4
*/
</script>
</body>
Update与Exit的使用
<body>
<p>name1</p>
<p>name2</p>
<p>name3</p>
<script>
var dataset = [3,6];
var p = d3.select("body")
.selectAll("p");
var update = p.data(dataset)//绑定数据,并得到update部分
var exit = update.exit();//得到exit部分
//下面检验是否真的得到
//对于update的处理
update.text(function(d,i){
return "update: "+d+",index: "+i;
})
//对于exit的处理通常是删除 ，但在这里我并没有这么做
// 删除操作为 exit.remove()
exit.text(function(d,i){
return "exit";
})
/*
运行结果如下：
update: 3,index: 0
update: 6,index: 1
exit
*/
</script>
</body>
selection.join(enter[, update][, exit])
这是V5版本的新特性，这种方法很方便，可以代替selection.enter, selection.exit, selection.append, selection.remove, selection.order.
svg.selectAll("circle")
.data(data)
.join("circle")
.attr("fill", "none")
.attr("stroke", "black");
简写相当于:
svg.selectAll("circle")
.data(data)
.join(
enter => enter.append("circle"),
update => update,
exit => exit.remove()
)
.attr("fill", "none")
.attr("stroke", "black");
通过在进入、更新和退出上传递单独的函数，您可以更好地控制发生的事情。通过指定选择的关键函数、数据，您可以尽量减少对DOM的更改以优化性能。例如，为输入和更新设置不同的填充颜色:
svg.selectAll("circle")
.data(data)
.join(
enter => enter.append("circle").attr("fill", "green"),
update => update.attr("fill", "blue")
)
.attr("stroke", "black");