D3 笔记六：Update、Enter、Exit

什么是 Update、Enter、Exit

如果数组为

[3, 6, 9, 12, 15]

，将此数组绑定到三个 p 元素的选择集上。可以想象，会有两个数据没有元素与之对应，这时候 D3 会建立两个空的元素与数据对应，这一部分就称为 Enter。而有元素与数据对应的部分称为 Update。如果数组为

[3]

，则会有两个元素没有数据绑定，那么没有数据绑定的部分被称为 Exit。示意图如下所示：



如此，便可以很好的理解之前笔记中出现的下面代码了：

svg.selectAll("rect")   // 选择svg内所有的矩形，数量为0
.data(dataset)      // 将数组与元素数量为0的选择集绑定
.enter()            // 选择选择集的enter部分
.append("rect")     // 添加足够数量的矩形元素

语法与一般用法

如何获取这个三个不同部分的获取呢？请看下面的代码：

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();

//获取exit部分
var exit = update.exit();

再获取到这三个部分后的一般做法是：

update 部分：一般用于更新属性值；

enter 部分：一般先添加元素后，再赋予属性值；

exit 部分：一般直接删除这个部分的元素——

remove()

。