可视化D3.js库(3)-深入理解update、enter、ex
2020-05-12 本文已影响0人
皮皮大
重要性
Update、Enter、Exit是D3.js中十分重要且关键的3个概念。它们三主要处理的是数据集个数和选择集个数之间的匹配问题。
图解三者关系
image
上图的解释：
-
绿色：如果给定的数据
data和节点Nodes中的数据相等，则进行update操作 -
蓝色：如果数组中个数多余节点中的元素个数，进行
update和enter操作 -
橙色：如果给定的数据中个数不足，则
update和exit操作
image
代码解释
update
-
给定的数组中的个数和
DOM中的个数相等，则进行update操作，变成了红色，更新数据。 -
没有进行enter()方法中变成绿色的操作
image
image
update和enter
-
给定的元素个数是
2，多余DOM的元素个数 -
同时执行
update+enter两个操作
-
红色：
update -
绿色：
enter
image
update、exit
-
给定的数组中元素个数小于
DOM中的个数（2个） -
同时实行
update+exit操作
-
红色：
update -
蓝色：
exit
image
