google-chrome - d3 滚动缩放在 Chrome 上不再起作用

Question

可能最近有一个 Chrome 更新，它在滚动功能上制动了 d3 缩放。一切仍然正常工作，例如边缘。请检查这个简单的例子以获得证明 - http://bl.ocks.org/nnattawat/9689303
也许有人知道我们如何恢复到较旧的 Chrome 版本以使此功能再次运行？

Answer 1

我也遇到过这个“错误” - 请参阅此 github thread about it
在我看到的大多数示例中，它不再在 Chrome 89.0.4389.90 (Windows) 中工作，缩放附加到非根 SVG 元素。
如 d3-zoom observable example , 确保它是根 SVG 是 d3.zoom() 的元素被调用，而不是 <g>或 <rect> :

const svg = d3.create("svg")
      .attr("viewBox", [0, 0, width, height]);

  const g = svg.append("g");

  g.selectAll("circle")
    .data(data)
    .join("circle")
      .attr("cx", ([x]) => x)
      .attr("cy", ([, y]) => y)
      .attr("r", 1.5);

  svg.call(d3.zoom()
      .extent([[0, 0], [width, height]])
      .scaleExtent([1, 8])
      .on("zoom", zoomed));

  function zoomed({transform}) {
    g.attr("transform", transform);
  }

  return svg.node();