「数据可视化 D3系列」入家世三章：深入理解 Update-Enter-Exit 模式 ...

---

一、数据绑定三态：Update、Enter、Exit

D3.js 的数据绑定依照一个强大的模式，称为 Update-Enter-Exit 模式，这是D3处理数据与DOM元素匹配的核心机制。
三种状态的直观理解

状态描述类比Update数据与元素匹配的部门现有员工的岗位调整Enter数据比元素多，需要创建新元素新招聘的员工Exit元素比数据多，需要移除多余元素离职的员工

---

二、基础概念

1. Update 选区 - 处理已有元素

1. // 基础用法
2. const update = d3.selectAll("p")
3.   .data([1, 2, 3]); // 自动创建Update选区
5. update.text(d => d); // 更新匹配的元素

复制代码

2. Enter 选区 - 处理新增数据

1. const enter = update.enter(); // 获取Enter选区
3. enter.append("p") // 为多出的数据创建新元素
4.   .text(d => d);

复制代码

3. Exit 选区 - 处理多余元素

1. const exit = update.exit(); // 获取Exit选区
3. exit.remove(); // 删除没有数据对应的元素

复制代码

---

三、完备工作流程