title: d3 v5 Axis Scale Change Panning Way Too Much
body: <p>I have a simple chart with time as the X axis. The intended behavior is that while dragging in the graph, the X axis only will pan to show other parts of the data.</p>
  
  <p>For convenience, since my X axis is in a react component, the function that creates my chart sets the X scale, the x axis, and the element it is attached to as <code>this.xScale</code>, <code>this.xAxis</code>, and <code>this.gX</code>, respectively.</p>
  
  <p>If I set this as the content of my zoom method, everything works fine:</p>
  
  <pre><code>        this.gX.call(this.xAxis.scale(d3.event.transform.rescaleX(this.xScale)))
  </code></pre>
  
  <p>The X axis moves smoothly with touch input. However, this doesn't work for me, because later when I update the chart (moving data points in response to the change of the axis), I need <code>this.xAxis</code> to be changed so the points will map to different locations.</p>
  
  <p>So, I then set the content of my zoom method to this:</p>
  
  <pre><code>        this.xScale = d3.event.transform.rescaleX(this.xScale);
          this.xAxis = this.xAxis.scale(this.xScale);
          this.gX.call(this.xAxis);
  </code></pre>
  
  <p>As far as I can tell, this should function EXACTLY the same way. However, when I use this code, even without running my <code>updateChart()</code> function (updating the data points), the X axis scales erratically when panning, way more than normal. My X axis is based on time, so suddenly a time domain from 2014 to 2018 includes the early 1920s.</p>
  
  <p>What am I doing wrong?</p>