D3 events in new versions

I have written the following snippet:

ngAfterViewInit() {
    var svg = d3
      .select("svg")
      .call(d3.zoom().on("zoom", () => {
        svg.attr("transform", d3.event.transform)
      }))
      .append("g")
}

I am aware that the d3.event has been removed in new releases, but reading through the documentation on how to handle the events in callbacks does not make me understand how to modify this…

Can someone please explain this tiny bit to me and how to fix it to work, in a simple way that a novice like me can understand? Thanks

Answer

From this migration guide, the d3.event.transform must be replaced with the following

ngAfterViewInit() {
  let svg = d3                                // <-- I'd suggest using `let` instead of `var`
    .select("svg")
    .call(d3.zoom().on("zoom", (event) => {   // <-- `event` argument
      svg.attr("transform", event.transform); // <-- use `event` here
    }))
    .append("g");
}