D3js 中的 selection.enter() 是干啥的？

D3.js 中的 selection.merge() 详解

selection.merge() 是 D3.js 中用于合并 enter 选择和更新选择的重要方法，它使得我们可以同时对新增元素和现有元素应用相同的操作。

基本概念

在 D4+ 版本中，merge() 被引入来简化之前需要分别处理 enter 和 update 选择的常见模式。

传统模式（D3 v3及之前）

// 传统方式需要分别处理 enter 和 update
var circles = svg.selectAll("circle").data(data);

// 处理新增元素
circles.enter().append("circle")
    .attr("r", 5);

// 更新所有元素（新增和现有）
circles
    .attr("cx", function(d, i) { return i * 10; })
    .attr("cy", 50);

使用 merge() 的现代模式（D4+）

// 现代方式使用 merge
var circles = svg.selectAll("circle").data(data);

circles.enter().append("circle")
    .attr("r", 5)
    .merge(circles) // 合并 enter 和 update 选择
    .attr("cx", (d, i) => i * 10)
    .attr("cy", 50);

merge() 的主要作用

1. 合并操作：将 enter 选择中的新元素和 update 选择中的现有元素合并为一个选择
2. 代码简化：避免对相同的属性或样式需要写两次（一次对 enter，一次对 update）
3. 保证一致性：确保新增元素和现有元素具有相同的视觉表现

典型使用场景

基本柱状图更新

function update(data) {
  // 数据绑定
  const bars = d3.select("#chart").selectAll("rect").data(data);
  
  // 处理enter和merge
  bars.enter()
    .append("rect")
    .attr("fill", "steelblue")
    .merge(bars) // 合并后设置共同属性
    .attr("x", (d, i) => i * 25)
    .attr("y", d => height - yScale(d))
    .attr("width", 20)
    .attr("height", d => yScale(d));
  
  // 处理exit
  bars.exit().remove();
}

带有过渡动画的更新

// 带有动画的更新
bars.enter()
  .append("rect")
  .attr("fill", "steelblue")
  .attr("height", 0)
  .attr("y", height)
  .merge(bars)
  .transition()
  .duration(500)
  .attr("x", (d, i) => i * 25)
  .attr("y", d => height - yScale(d))
  .attr("width", 20)
  .attr("height", d => yScale(d));

为什么需要 merge()

1. DRY原则：避免重复代码（Don’t Repeat Yourself）
2. 性能优化：减少DOM操作次数
3. 可维护性：使更新逻辑更加清晰集中
4. 动画一致性：确保新老元素动画同步

注意事项

1. merge() 必须在 enter 选择后立即调用
2. 合并后的选择包含 enter 和 update 中的所有元素
3. 通常在 merge 之后设置共同的属性和样式
4. 仍然需要单独处理 exit 选择（使用 .exit().remove()）

总结

selection.merge() 是 D3.js 数据绑定模式中的重要优化，它：

• 简化了同时操作新增和现有元素的代码
• 使数据可视化更新更加高效和一致
• 成为 D3 v4+ 中推荐的更新模式
• 与 enter 和 exit 选择一起构成了完整的数据驱动更新策略