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

2,243 阅读1分钟

Update、enter、exit作用

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

图解三者关系

上图的解释:

  1. 绿色:如果给定的数据data和节点Nodes中的数据相等,则进行updata操作
  2. 蓝色:如果数组中个数多余节点中的元素个数,进行updateenter操作
  3. 橙色:如果给定的数据中个数不足,则updateexit操作

代码解释

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

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

🏆 技术专题第三期 | 数据可视化的那些事......