D3 Multiline Chart with transition

Question

I'm working on a pure d3 implementation of a multiline chart with transitions. It works quite well with a little exception. Using transitions with a line drawn as path seems quite difficult. I found some solutions using clipping paths and so on and always combined with the warning, that these solutions are quite performance consuming.

Is there any easier solution of showing progress in the multiline chart as a real point to point drawing (at least in users perception).

You can inspect my current code under http://bl.ocks.org/m99coder/136db7134df6fdc3e3cf

With kind regards Marco

Update 2015-07-14 14:14:00 CET

I refactored some parts of my code: http://bl.ocks.org/m99coder/8a9fab35b8f47ab8844c . But unfortunately I couldn't get it to work as smooth as you given tutorial link ( http://bost.ocks.org/mike/path/ ). Any advices? Maybe it's related to the defined range, which avoids values outside of „viewport“.

Update 2015-07-14 14:57:00 CET

Getting closer but not perfect yet: http://bl.ocks.org/m99coder/136db7134df6fdc3e3cf/a53f06a0334bada96e1f892c886c5b68fe3c0a05 . It looks like the path is hopping back to the right after smooth transition to the left.

Update 2015-07-14 17:37:00 CET

Harmonizing durations of updates and transitions didn't solved it too. Now it's hopping to the left: http://bl.ocks.org/m99coder/8a9fab35b8f47ab8844c/cd25a9d33839f52974780b1c142922cbbf8f64f4

Answer 1

I managed it to work as expected. It was a timing issue. Data was modified before the transition was done. The new approach uses a callback to get informed when the transition is over and shifts data afterwards.

http://bl.ocks.org/m99coder/54d6e0130064c699e6e4/06149dd1ab22cebf5b307bab3ec90079e356bce9