You probably want to look at:
D3 Real-Time streamgraph (Graph Data Visualization),
especially the link of the answer:
http://bost.ocks.org/mike/path/
In general, I see two ways to deal with the vertical transition problem:
- oversampling having some linear interpolation between the real point, and the smaller the interval between points, the more “horizontal” the vertical transition will look (but the drawback is that you get a lot of “false” points, that may be inacceptable depending on the use of the chart)
- extend the chart by adding at the end, and translate the chart on the left, making sure the still available left part is not shown until you remove it (clipping it or doing any other trick), that’s best, and the solution mentioned above does that