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?

Answer 1

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 [email protected] --save

or

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

Answer 2

The following worked for me in d3 version 7.3.0

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