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