title: D3.js line transition is going out of the graph
body: <p>I have a line graph where I have line transition. However on the initial graph drawing line path is ok, within the graph. But when I use the transition the line goes out of the container to the margins.</p>
  
  <p><strong>Transition function:</strong></p>
  
  <pre><code>that.graph.select('.data-line')
       .transition().duration(750)
       .attr('fill', 'none')
       .attr('stroke', '#ff0000')
       .attr('stroke-width', 2)
       .attr('d', line);
  </code></pre>
  
  <p><strong>Line:</strong></p>
  
  <pre><code>const line = d3.line()
       .x(d =&gt; xAxis(new Date(d.n)))
       .y(d =&gt; yAxis(d.v))
       .defined(d =&gt; d.v || d.v === 0);
  </code></pre>
  
  <p><strong>Axes:</strong></p>
  
  <pre><code>const xAxis = d3.scaleTime()
                  .range([0, width])
                  .domain(xDomain);
  
  const yAxis = d3.scaleLinear()
                  .range([height, 0])
                  .domain(yDomain);
  </code></pre>
  
  <p><strong>Domains:</strong></p>
  
  <pre><code>const yDomain = d3.extent(data, d =&gt; d.v);
  const xDomain = d3.extent(data, d =&gt; new Date(d.n));
  </code></pre>
  
  <p><strong>Dimensions:</strong></p>
  
  <pre><code>const width = window.innerWidth - this.margins.left - this.margins.right;
  const height = window.innerHeight - this.margins.top - this.margins.bottom;
  </code></pre>
  
  <p><strong>Initial line drawing:</strong> (this is ok)</p>
  
  <pre><code>this.graph.append('g').attr('class', 'data-wrapper');
  
  const line = d3.line()
                  .x(d =&gt; this.xAxis(new Date(d.n)))
                  .y(d =&gt; this.yAxis(d.v))
                  .defined(d =&gt; d.v || d.v === 0);
  
  this.graph
       .select('.data-wrapper')
       .append('path')
       .datum(data)
       .attr('class', 'data-line')
       .attr('fill', 'none')
       .attr('stroke', '#ff0000')
       .attr('stroke-width', 2)
       .attr('d', line);
  </code></pre>
  
  <p>Here is the screenshot:</p>
  
  <p><a href="https://i.stack.imgur.com/GQTOy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GQTOy.png" alt="enter image description here"></a>
  Any help is appreciated.</p>