D3 Zoom Cannot read property 'transform' of undefined

Question

I am trying to use a simple d3.zoom following simple tutorials as this but I always incur in the same error that I don't understand.

here is my code:

  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);

but I receive this error:

Uncaught TypeError: Cannot read property 'transform' of undefined

is d3.event changed? or am I doing something wrong?

user_6141025 · Answer

Based on what I read here, D3 v6 doesnt support d3.event. I was able to load a d3 graph by installing D3 v5:

npm install d3@5.16.0 --save

or

user_18031893 · Answer

The following worked for me in d3 version 7.3.0

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

D3 Zoom Cannot read property 'transform' of undefined

2 Answers