Can't make paths draw growing slowly with D3

Question

Using the d3 graphics library, I can\'t seem to make paths draw slowly so they can be seen growing.

This site has a perfect example in the \"Line Chart (Unrolling)

Answer 1

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