score:0

With only d3 (i don't know about rickshaw), we can do that with the following code :

var linePath = svg.append("path")
    .datum(data)
    .attr("d", line)
    .style("fill", "none")
    .style("stroke", "#3498db")
    .style("stroke-width", "1px")
    .attr("transform", "translate(150, 0)");

var linePathLength = linePath.node().getTotalLength();
linePath
    .attr("stroke-dasharray", linePathLength)
    .attr("stroke-dashoffset", linePathLength)
    .transition()
        .duration(4000)
        .ease("linear")
        .attr("stroke-dashoffset", 0);

The first part of the code draw a simple line, without animation.

The animation is set in the second part. With linePathLength we get the length of the line in px. Then stroke-dashoffset that defines the starting point of the line is set to 0, that allow us to slowly draw the line from left to right.

The code has been found here http://datavis.fr/index.php?page=transition (in french though).


Related Query