Line Transition

D3’s default path interpolation is the same as its string interpolation: it finds numbers embedded in strings, and interpolates those numbers. So, the default behavior when interpolating two paths is like this:

M x0, y0 L x1, y1 L x2, y2 L x3, y3 
   ↓   ↓    ↓   ↓    ↓   ↓    ↓   ↓
M x0, y1 L x1, y2 L x2, y3 L x3, y4 

For example, the first point ⟨x0,y0⟩ is interpolated to ⟨x0,y1⟩. Since x0 is the same, all you see are the y-values changing (see example)—you don't see the path slide to the left as intended.

What you want to happen here is something like this:

M x0, y0 L x1, y1 L x2, y2 L x3, y3 L xR, y4
   ↓   ↓    ↓   ↓    ↓   ↓    ↓   ↓
M xL, y0 L x0, y1 L x1, y2 L x2, y3 L x3, y4 

Where xL is some negative value off the left side, and xR is some positive value off the right side. This way, the first point ⟨x0,y0⟩ is interpolated to ⟨xL,y0⟩; meaning, the x-coordinate is interpolated rather than the y-coordinate, and so the path appears to slide off to the left. Likewise, the incoming point ⟨xR,y4⟩ is interpolated to ⟨x3,y4⟩.

Alternatively, you can achieve this effect by interpolating a transform attribute rather than the path, so that the path "d" attribute remains static but the path element translates to the left during the transition. In that case, the path is redrawn like this:

M x0, y0 L x1, y1 L x2, y2 L x3, y3 L xR, y4

Then, a transform transition is applied:

translate(0)
          ↓
translate(xL)

Thus causing the path to slide to the left. A clip path is used so the path is not visible outside of the chart body.

Note that for charts with spline interpolation, you’ll need to crop the visible part of the line by an extra point, so that the change in tangent is not visible. See the spline interpolation version.