Question

I am trying to implement a simple path transition as shown here. I’m no javascript nor d3 magician, so I tried to give it my best shot:

var line = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.price); });

svg.append("path")
  .datum(data)
  .attr("class", "line")
  .attr("d", line)
  .transition().duration(next.duration||1000).delay(next.delay||0); # not right

How do I get the transition to work properly?

Answer 1

One way to do path drawing animation in d3 is to use the dash-array and dash-offset attributes.

What you can do is set the dashoffset to the total path length, then decrease the dashoffset over time until it is zero. This will simulate the path being drawn. Check out the SVG docs on stroke-dasharray and stroke-dashoffset.

Conceptually, what you are doing is this:

Say your line is 4 units long (—-). You are setting the dasharray to be (—-,,,,) i.e. four units and then four spaces. You set the dashoffset to be 4 units, so the line will lie 4 units to the left of the visible space. Then, as you decrease dashoffset to 0, the line will look like (-,,,,) and then (–,,,,) and so on until the whole line is drawn.

var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.price); });

var path = svg.append("path")
                  .attr("d", line(data))
                  .classed("line", true);

var pathLength= path.node().getTotalLength();

path
  .attr("stroke-dasharray", pathLength + " " + pathLength)
  .attr("stroke-dashoffset", pathLength)
  .transition()
  .duration(2000)
  .ease("linear")
  .attr("stroke-dashoffset", 0);

–

Learned from Duopixel’s post here.