D3 zoom 在使用 zoomIdentity 后打破了鼠标滚轮缩放

Question

当我使用 d3-zoom 并使用 zoomIdentity 以编程方式调用 scaleTo 函数时，我无法再使用鼠标滚轮进行缩放。

我该如何解决这个问题？

https://observablehq.com/d/8a5dfbc7d858a16b

// mouse wheel zoom not working because use of 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)
  
  zoom.scaleTo(svg, d3Zoom.zoomIdentity)

  return svg.node();
}

Answer 1

zoom.scaleTo(svg, d3Zoom.zoomIdentity) 的第二个参数接受 k 缩放因子（例如，2 表示 2 倍缩放）。 zoom.scaleTo 方法旨在用于设置缩放级别，而不是平移（x 和 y 位置）。

如果要将整个变换设置为缩放标识（重置缩放级别以及 x 和 y 位置），方法是 zoom.transform(svg, d3Zoom.zoomIdentity)。

如果你确实只是想重设比例，你可以使用zoom.scaleTo(svg, d3Zoom.zoomIdentity.k)，或者简单地zoom.scaleTo(svg, 1)。

D3 zoom 在使用 zoomIdentity 后打破了鼠标滚轮缩放

D3 zoom breaks mouse wheel zooming after using zoomIdentity

d3.js

observablehq