使用Mike Bostocks oberservablehq示例的工具提示代码制作独立的d3v5缩放后，键入错误

问题描述

我正在尝试使用Mike出色的https://observablehq.com/@d3/zoom-with-tooltip下载的代码创建一个html + js文件下面的代码显示数据，并且鼠标悬停有效，但尝试使用：

进行缩放失败

index3.html:70 Uncaught TypeError: Cannot destructure property 'transform' of 'undefined' as it is undefined.
at SVGSVGElement.zoomed (index3.html:70)
at H.apply (d3.v5.min.js:2)
at kt (d3.v5.min.js:2)
at w.emit (d3.v5.min.js:2)
at w.zoom (d3.v5.min.js:2)
at d3.v5.min.js:2
at d3.v5.min.js:2

<!DOCTYPE html>
<meta charset="utf-8">
<title>Zoom with Tooltip from https://observablehq.com/@d3/zoom-with-tooltip</title>

<body>
  <svg width="960" height="350"></svg>
</body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
  var radius = 6;
  var theta = Math.PI * (3 - Math.sqrt(5));
  var step = 12;
  var width = 800;
  var height = 350;

  function data() { //(radius,step,theta,width,height){
    return (
      Array.from({
        length: 2000
      },(_,i) => {
        const radius = step * Math.sqrt(i += 0.5),a = theta * i;
        return [
          width / 2 + radius * Math.cos(a),height / 2 + radius * Math.sin(a)
        ];
      })
    )
  };

  // Replaced by select below
  // const svg = d3.create("svg")
  //        .attr("viewBox",[0,height]);

  const svg = d3.select('svg');

  // all code below unchanged

  const g = svg.append("g")
    .attr("class","circles");

  g.append("style").text(`
        .circles {
          stroke: transparent;
          stroke-width: 1.5px;
        }
        .circles circle:hover {
          stroke: black;
        }
    `);

  g.selectAll("circle")
    .data(data)
    .join("circle")
    .datum(([x,y],i) => [x,y,i])
    .attr("cx",([x]) => x)
    .attr("cy",([,y]) => y)
    .attr("r",radius)
    .attr("fill",i]) => d3.interpolateRainbow(i / 360))
    .on("mousedown",mousedowned)
    .append("title")
    .text((d,i) => `circle ${i}`);

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

  function mousedowned(event,[,i]) {
    d3.select(this).transition()
      .attr("fill","black")
      .attr("r",radius * 2)
      .transition()
      .attr("fill",d3.interpolateRainbow(i / 360))
      .attr("r",radius);
  }

  function zoomed({
    transform
  }) {
    g.attr("transform",transform);
  }
</script>

我只是看不到问题，感谢任何帮助。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript zoom