javascript - D3 Zoom 无法读取未定义的属性 'transform'

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>