D3 笔记六：Update、Enter、Exit

1. 什么是 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")     // 添加足够数量的矩形元素

2. 语法与一般用法

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

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