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

x0,y0 x1,y1 x2,y2 x3,y3 
x0,y1 x1,y2 x2,y3 x3,y4 

So, 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:

x0,y0 x1,y1 x2,y2 x3,y3 xR,y4 
xL,y0 x0,y1 x1,y2 x2,y3 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⟩.

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.