D3.js点击事件仅首次生效，后续仅影响最后DOM节点原因分析

核心问题：enter.select与全局d3.select的作用范围差异 #

你遇到的问题本质是D3.js数据绑定流程中「enter阶段」的作用边界，以及选择器的作用范围问题：

1. enter.select仅作用于「新增元素」
   D3的enter()是数据绑定的专属阶段，只处理「数据存在但对应DOM元素尚未创建」的情况。enter.select()只能选中这个阶段里的元素——也就是首次渲染时新生成的圆形。后续触发点击事件时，数据和DOM已经一一对应，enter()返回的集合是空的，此时enter.select()根本选不到任何元素。如果你的事件绑定逻辑依赖这个选择器，就会出现「首次有效，后续失效」的情况；而你看到的「仅最后一个圆变色」，大概率是代码中变量作用域泄漏（比如循环里用var而非let），导致事件错误绑定到了最后一个元素的引用上。

2. d3.select（或d3.selectAll）作用于全局匹配元素
   全局选择器会从整个文档中选中所有符合条件的DOM元素，不管是首次创建的还是已经存在的圆形。每次绑定事件时，它都会覆盖所有目标元素，自然能保证每个圆都能响应点击事件。

正确的事件绑定姿势 #

D3中处理所有元素（新增+已存在）的逻辑，应该用merge()合并enter和update集合，而不是单独操作enter阶段：

const circles = d3.select('svg').selectAll('circle').data(data);

// 处理新增元素
circles.enter()
  .append('circle')
  .attr('r', 20)
  .attr('cx', (d,i) => i*60 + 50)
  .attr('cy', 50)
// 合并enter和update集合，统一绑定事件
.merge(circles)
  .on('click', function() {
    const currentFill = d3.select(this).attr('fill');
    d3.select(this).attr('fill', currentFill === 'blue' ? 'red' : 'blue');
  });

这样不管是首次渲染还是后续更新，所有圆形都会正确绑定点击事件。

内容的提问来源于stack exchange，提问作者kelo keloo