D3.js库-3-深入理解update、enter、exit

三者作用

Update、Enter、Exit是D3.js中十分重要且关键的3个概念。它们三主要处理的是数据集个数和选择集个数之间的匹配问题。

图解三者关系

上图的解释：

1. 绿色：如果给定的数据data和节点Nodes中的数据相等，则进行update操作
2. 蓝色：如果数组中个数多余节点中的元素个数，进行update和enter操作
3. 橙色：如果给定的数据中个数不足，则update和exit操作

代码解释

update

1. 给定的数组中的个数和DOM中的个数相等，则进行update操作，变成了红色，更新数据。
2. 没有进行enter()方法中变成绿色的操作

update和enter

1. 给定的元素个数是2，多余DOM的元素个数

2. 同时执行update+enter两个操作

   • 红色：update

   • 绿色：enter

update、exit

1. 给定的数组中元素个数小于DOM中的个数（2个）
2. 同时实行update+exit操作
   • 红色：update
   • 蓝色：exit

$\color{red}{exit部分通常执行的是remove操作，直接删除掉}$