D3 Zoom 无法读取未定义的属性“转换”

Posted 2023-02-22

【中文标题】D3 Zoom 无法读取未定义的属性“转换”

【英文标题】：D3 Zoom Cannot read property 'transform' of undefined

【发布时间】：2021-04-15 16:01:20

【问题描述】：

我正在尝试使用简单的d3.zoom 遵循简单的教程，但我总是遇到我不理解的相同错误。

这是我的代码：

  let svg = d3.select(".chart_container")
  .append("svg")

  let g = svg.append('g')
    .attr("transform", `translate(200px, 200px)`);

  var zoom_handler = d3.zoom()
    .on("zoom", zoom_actions);

  //specify what to do when zoom event listener is triggered 
  function zoom_actions()
    g.attr("transform", d3.event.transform);
  

  //add zoom behaviour to the svg element 
  //same as svg.call(zoom_handler); 
  zoom_handler(g);

但我收到此错误：

Uncaught TypeError: Cannot read property 'transform' of undefined

d3.event 改变了吗？还是我做错了什么？

【问题讨论】：

如果使用 d3v6：d3.event 不再是 d3.v6。请参阅here - 不专门与 d3.transform 对话，但该事件现在作为第一个参数传递给处理程序：zoom_actions(event) event.transform...

【参考方案1】：

根据我在这里阅读的内容，D3 v6 不支持d3.event。我能够通过安装 D3 v5 来加载 d3 图表：

npm install d3@5.16.0 --save

或

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js" integrity="sha512-FHsFVKQ/T1KWJDGSbrUhTJyS1ph3eRrxI228ND0EGaEp6v4a/vGwPWd3Dtd/+9cI7ccofZvl/wulICEurHN1pg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>