5

I am trying to add transitions to a line graph using Rickshaw's nice charting framework. I am new to d3, but it seems as though I will need to add a straight line and then transition to the graph data within the render function on Rickshaw.Graph.Renderer

My question is, is there anything out there that would help add some animation to my line chart - perhaps transition from a flat line - or draw line from left to right.

I have seen examples with raw d3 but adapting rickshaw seems hard - or maybe I am hitting it from the wrong angle.

marcusb
  • 612
  • 5
  • 11

1 Answers1

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).

Pierre Vivet
  • 133
  • 8