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