D3缩放 无法读取未定义属性“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 是否被更改了？还是我的做法有问题？

- user3755529

---

如果使用d3v6：从d3.v6开始，d3.event已经不存在了。请参见此处 - 虽然没有特别提到d3.transform，但现在事件作为第一个参数传递给处理程序：zoom_actions(event) { event.transform... } - Andrew Reid

Answer 1

以下内容适用于d3版本7.3.0

 .call(d3.zoom().on("zoom", function () {
    svg.attr("transform", d3.zoomTransform(this))
  }))

- flystmaker

---

你正在使用 ".call" 的对象是什么？ - Michael Higgins

@MichaelHiggins 我相信他是在 SVG 上调用它。 - Niklas

Answer 2

根据我在这里阅读的内容，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>

- agm1984