A common pattern when animating lines in svg is setting a stroke-dasharray
of the length of the path and then animate stroke-dashoffset
:
var totalLength = path.node().getTotalLength();
path
.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
.transition()
.duration(2000)
.ease("linear")
.attr("stroke-dashoffset", 0);
You can see a demo here:
http://bl.ocks.org/4063326