D3从v3升级到v4时zoom行为相关代码的适配修改问题

错误原因 #

D3 v4 对 zoom 行为模块做了重构，直接移除了 v3 版本中内置的 .y()、.x() 绑定比例尺的方法，所以运行原代码会提示对应方法不存在的报错。

正确实现方式 #

你需要把比例尺的更新逻辑移到 zoom 事件回调函数中处理，利用 zoom 事件返回的 transform 对象更新你的 y 轴比例尺即可：

1. 首先调整 zoom 初始化代码，去掉 .y(yAxis) 配置：

d3.zoom()
  .scaleExtent([1, 20])
  .on('zoom', myFunctionHandler);

2. 修改你的 myFunctionHandler 回调逻辑，添加 y 比例尺的变换处理（假设你生成yAxis依赖的原始比例尺变量名为yScale）：

function myFunctionHandler() {
  // 应用当前缩放偏移变换到原始y比例尺
  const transformedYScale = d3.event.transform.rescaleY(yScale);
  // 更新y轴的比例尺并重绘
  yAxis.scale(transformedYScale);
  d3.select('.your-y-axis-selector').call(yAxis);
  
  // 其余原有视图更新逻辑保持即可，涉及y坐标计算的位置使用 transformedYScale 计算
}

如果是只允许y轴方向缩放，你还可以在zoom初始化时添加配置限制x轴缩放：

d3.zoom()
  .scaleExtent([1, 20])
  // 限制x轴方向不产生缩放偏移
  .on("zoom", function() {
    d3.event.transform.x = 0;
    d3.event.transform.kx = 1;
    myFunctionHandler();
  });

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