D3 v4/5循环过渡问题：替换.each为.on后仍无法运行

当你把D3 v3的代码迁移到v4/5时，仅仅替换.each()为.on()远远不够——D3 v4做了大规模的API重构，很多底层行为、参数传递、模块结构都发生了变化。以下是你必须排查的核心点：

• 事件对象的获取逻辑完全重构
  在D3 v3中，事件信息依赖全局的d3.event，同时回调里的this指向当前DOM元素；但v4/5把事件对象作为回调函数的第一个参数直接传入，全局d3.event仅在同步回调中有效，且鼠标位置计算的API也变了：

  // v3写法
  d3.select("line").each("click", function(d) {
    const pos = d3.mouse(this); // 依赖d3.event和this
  });
  
  // v4/5正确写法
  d3.select("line").on("click", function(event, d) {
    const pos = d3.pointer(event, this); // 用传入的event参数，d3.mouse换成d3.pointer
  });
  

  如果你还用箭头函数写回调，this会丢失指向DOM元素的能力，必须改用普通函数，或者用event.currentTarget获取元素。

• 别混淆.each()和.on()的本质用途
  你可能误解了v3里.each()的作用：v3中.on()才是专门的事件绑定方法，.each()是用来遍历选择集元素执行通用逻辑的（比如批量设置属性）。如果你的原代码里用.each()是做遍历而非事件绑定，那根本不需要换成.on()——v4/5里.each()依然存在且功能不变：

  // 这种遍历逻辑在v3和v4/5里写法完全一致，不用改
  d3.selectAll("circle").each(function(d, i) {
    d3.select(this).attr("r", d.radius);
  });
  

• 模块拆分导致的API命名变更
  D3 v4把原来的全局API拆成了独立模块，很多常用方法的命名彻底改变：

  • d3.scale.linear() → d3.scaleLinear()
  • d3.svg.axis() → d3.axisBottom()/d3.axisLeft()等
  • d3.time.scale() → d3.scaleTime()
  • d3.layout.treemap → d3.treemap()
    如果你的时间轴代码用到了这类旧API，必须替换成v4/5的新命名，否则会直接报错。

• 过渡与动画的API细节变化
  如果你代码里包含过渡动画，v3到v4的过渡逻辑也有调整：

  • 缓动函数从字符串形式（d3.ease("linear")）改成了直接引用（d3.easeLinear）
  • 过渡的链式调用逻辑更严格，比如transition().select()的行为和v3有差异
  • 自定义过渡的方法从d3.transition().tween()的参数格式也有变化

• SVG元素属性与选择集行为的细微差异
  比如你代码里的timeline = svg.append("line").attr("str...，大概率是stroke属性——虽然属性名没变，但如果涉及到轴生成、路径生成这类SVG相关的工具方法，v4/5的API已经完全重构（比如d3.svg.line()变成d3.line()），必须对应替换。

• 数据绑定的隐性变化
  虽然data()/enter()/exit()的核心流程没变，但v4/5里enter()返回的选择集行为更严格：比如v3里enter().append()可以直接链式操作父元素属性，v4/5里必须明确选择对应元素；另外，d3.keys()这类工具方法被替换成了原生Object.keys()，无需再依赖D3。

举个实际的迁移例子，假设你v3里的时间轴点击事件代码是：

timeline.each("click", function() {
  const mouseX = d3.mouse(this)[0];
  const time = xScale.invert(mouseX);
  console.log("Clicked at:", time);
});

迁移到v4/5应该改成：

timeline.on("click", function(event) {
  const mouseX = d3.pointer(event, this)[0];
  const time = xScale.invert(mouseX); // xScale要改成d3.scaleTime()
  console.log("Clicked at:", time);
});

这里不仅替换了.each()为.on()，还调整了事件参数的获取方式，以及确保比例尺用了v4的新API。

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