Demo 5 · selection 三态模型

对应讲义章节 3.5.1 D3 数据选择器。本 demo 把 D3 最核心的 Data-Join 三态模型（enter / update / exit）可视化：数据 > 元素 ⇒ 多出来的进入 enter，被替换的留在 update，多余元素进入 exit。

select vs selectAll

方法	返回	典型用法
d3.select("selector")	单个元素（或 null）	选中唯一的根元素
d3.selectAll("selector")	多个元素的 selection	绑定数据数组 → 三态模型
selection.select("selector")	每个选中元素的后代中第一个匹配	嵌套：父 → 子
selection.selectAll("selector")	每个选中元素的后代中所有匹配	嵌套：父 → 多个子
selection.selectChild()	直接子元素中的第一个	DOM 层级
selection.selectChildren()	所有直接子元素	DOM 层级

交互演示 —— enter / update / exit

当前数据：[1, 2, 3]（N=3） · 元素：3 个

绿色 = enter（新增元素）蓝色 = update（更新现有）红色 = exit（待移除）

核心代码

const circles = svg.selectAll("circle") .data(currentData) .join( enter => enter.append("circle") .attr("fill", "green"), update => update.attr("fill", "cyan"), exit => exit.remove() );

嵌入理论：D3 的 Data-Join 是 Mike Bostock 提出的声明式数据绑定模型。与命令式 DOM 操作相比，三态模型的优势： (1) 增量更新而非全量重绘 → 性能好；(2) 元素身份稳定 → 过渡动画自然； (3) 与函数式数据流天然契合 → 易于推理。

Demo 5 · D3 Selection 与 enter/update/exit