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:

Mx0,y0Lx1,y1Lx2,y2Lx3,y3 
  ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓
Mx0,y1Lx1,y2Lx2,y3Lx3,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—you don't see the path slide to the left as intended.

What you want to happen here is something like this:

Mx0,y0Lx1,y1Lx2,y2Lx3,y3LxR,y4 
  ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓
MxL,y0Lx0,y1Lx1,y2Lx2,y3Lx3,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⟩.

You can also approximate 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.