Since you can write more or less, arbitrary "tween" functions in D3 (I learnt more than I wanted to about these when I wrote the dynamic "semaphore pie" we used here [1] ) it's relatively viable to do it for paths created from within D3. For paths already present and wanting to be selected... I guess it would work pretty much the same, since d3 selectors are more or less good to go with embedded SVGs, IIRC.

It's actually a very nice trick (and I love moving things around in graphs), and I'm intrigued by how I'd do it with D3. If I have any free time this weekend I'll look into it ;)

[1] VanillaSEO: http://vanillaseo.com/report/20141030fdec7fda61eafac3b8dca58...

Ninja edit (or almost): Here's the relevant part of d3 docs about tweens: https://github.com/mbostock/d3/wiki/Transitions

You can transition the stroke-dasharray property and use element.getTotalLength to determine the total length of the path. Here’s a bl.ock:

http://bl.ocks.org/mbostock/5649592

And here’s an older graphic that demonstrates the technique in use:

http://www.nytimes.com/interactive/2013/02/20/movies/among-t...

We also used this technique to render the progress map in The Russia Left Behind:

http://www.nytimes.com/newsgraphics/2013/10/13/russia/

From d3js.org site I do get to this [1] (click the page number to to animate lines) not sure about the easing functionality however.

[1] http://www.nytimes.com/interactive/2013/10/09/us/yellen-fed-...