调用scaleTo传入zoomIdentity后d3-zoom鼠标滚轮缩放失效如何解决

问题根因 #

你调用zoom.scaleTo()时传入的参数类型不符合API要求：

• zoom.scaleTo(selection, k)的第二个参数要求是数值类型的缩放系数，而d3Zoom.zoomIdentity是包含k、x、y三个属性的完整Transform对象，传入后会破坏zoom实例绑定在svg元素上的内部状态，导致后续交互事件无法读取正确的变换参数，滚轮缩放自然失效。

修复方案 #

根据你的需求二选一即可：

方案1：仅重置缩放比例为1 #

如果只需要把缩放比例重置为初始值，直接给scaleTo传入数值1即可：

// 替换原代码中的错误调用
zoom.scaleTo(svg, 1)

方案2：完整重置变换（缩放+位移） #

如果需要同时把缩放、水平/垂直位移都重置为初始状态，应该使用专门设置完整Transform的zoom.transform()方法：

// 替换原代码中的错误调用
zoom.transform(svg, d3Zoom.zoomIdentity)

修复后完整代码 #

chart = {
  const svg = d3.create("svg")
      .attr("viewBox", [0, 0, width, height])
      .style("display", "block");

  const zoom = d3Zoom.zoom()
  svg.call(zoom);

  const zoomArea = svg.append('g');

  zoom.on('zoom', (e) => {
    zoomArea.attr("transform", e.transform)
  })


  zoomArea.append('circle')
    .attr("cx", width/2)
    .attr("cy", height/2)
    .attr("r", 20)
  
  // 按需选择上述两种修复方案的其中一行即可
  // 方案1：仅重置缩放
  // zoom.scaleTo(svg, 1)
  // 方案2：完整重置所有变换参数
  zoom.transform(svg, d3Zoom.zoomIdentity)

  return svg.node();
}

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