时间戳

首页 > 解决方案 > d3 滚动缩放在 Chrome 上不再起作用

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

问题描述

可能最近有一个 Chrome 更新，它制动 d3 缩放滚动功能。使用 Edge 时，一切仍然可以正常工作。请检查这个简单的例子以获得证明 - http://bl.ocks.org/nnattawat/9689303

也许有人知道我们如何恢复到较旧的 Chrome 版本以使此功能再次运行？

标签： google-chromed3.js

解决方案

我也遇到了这个“错误”——请参阅这个github 线程

在我看到的大多数示例中，它不再在 Chrome 89.0.4389.90 (Windows) 中工作，缩放被附加到非根 SVG 元素。

与d3-zoom observable example一样，确保它是根 SVG 是d3.zoom()被调用的元素，而不是 a <g>or <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();

推荐阅读