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

Question

我正在尝试使用一个简单的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改变了吗？还是我做错了什么？

Answer 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>