title: d3.event is undefined in zoom callback (Angular)
body: <p>I'm struggling to get the zooming working in D3.js / Angular. More specifically : the zooming works, but the axis get zoomed too, which is not what I want.</p>
  
  <p>The code (below) should solve this zooming problem, but it doesn't work : d3.event gives me "undefined" value :</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  
  import * as d3 from 'd3';
  import {event as currentEvent} from 'd3-selection';
  import * as d3Array from 'd3-array';
  import { ClosedTrade } from '../models/closed-trade.model';
  
  @Injectable({
    providedIn: 'root'
  })
  export class TmpChartService {
    svg: any;
    xAxis: any;
    xScale: any;
    yAxis: any;
    yScale: any;
  
    constructor() { }
  
    drawGraph() {
  
      // Use the margin convention practice
      const margin = { top: 100, right: 100, bottom: 100, left: 100 };
      const width = window.innerWidth - margin.left - margin.right; // Use the window's width
      const height = window.innerHeight - margin.top - margin.bottom; // Use the window's height
  
          // An array of objects of length N. Each object has key -&gt; value pair, the key being 'y' and the value is a random number
          const dataset = d3.range(10).map(function (d) {
            return { 'y': d3.randomUniform(1)() };
          });
  
      const zoom = d3.zoom()
        .scaleExtent([1, 10])
        .on('zoom', () =&gt; {
          console.log(d3.event.translate);
          // doesn't work =&gt; d3.event.translate is undefined!
          d3.select('svg').attr('transform', 'translate(' + d3.event.translate + ')scale(' + d3.event.scale + ')');
          // d3.select('svg').attr('transform', d3.event.transform); // zooms but the axis are zoomed too which I want to avoid
          // d3.select('svg').attr('transform', 'translate('
          // + currentEvent.translate + ')scale(' + currentEvent.scale + ')'); // currentEvent is also undefined
        });
  
      // X scale will use the index of our data
      this.xScale = d3.scaleLinear()
        .domain([0, dataset.length]) // input
        .range([0, width]); // output
  
      // Y scale will use the randomly generate number
      this.yScale = d3.scaleLinear()
        .domain([
          d3Array.min(dataset.map(d =&gt; d.y)),
          d3Array.max(dataset.map(d =&gt; d.y))
        ]) // input
        .range([height, 0]); // output
  
      // d3's line generator
      const line = d3.line&lt;any&gt;()
        .x((d, i) =&gt; this.xScale(i)) // set the x values for the line generator
        .y((d) =&gt; this.yScale(d.y)) // set the y values for the line generator
        .curve(d3.curveMonotoneX); // apply smoothing to the line
  
      this.svg = d3.select('body').append('svg')
        .attr('width', width + margin.left + margin.right)
        .attr('height', height + margin.top + margin.bottom)
        .call(zoom);
  
      this.xAxis = this.svg.append('g')
        .attr('class', 'x axis')
        .attr('transform', 'translate(0,' + height + ')')
        .call(d3.axisBottom(this.xScale)); // Create an axis component with d3.axisBottom
  
      // Call the y axis in a group tag
      this.yAxis = this.svg.append('g')
        .attr('class', 'y axis')
        .call(d3.axisLeft(this.yScale)); // Create an axis component with d3.axisLeft
  
      // Append the path, bind the data, and call the line generator
      this.svg.append('path')
        .datum(dataset) // Binds data to the line
        .attr('class', 'line') // Assign a class for styling
        .attr('d', line); // Calls the line generator
    }
  }
  </code></pre>
  
  <p>So, the line d3.event.translate => d3.event is undefined, and so is the other way I've tried: currentEvent is also undefined.</p>
  
  <p>Here's the screen of the result, with debugger tool showing the error :
  <a href="https://i.stack.imgur.com/N72iL.png" rel="nofollow noreferrer">d3.event is undefined</a></p>
  
  <p>Thanks you for the insights ;)</p>