Using D3, how can I transition a line one point at time?

Question

I'm working on a visualization project in which one component is a line chart overlayed on a bar graph. I delayed the bar transitions at a time. I would like the line to transition similarly so each point on the line remains "attached" to the bar.

Here's the code for the line:

var line = d3.svg.line()
 .x(function(d, i) {
    return xScale(i) + 20;
 })
 .y(function(d) {
    return h - yScale(parseFloat(d.performance));
 });

svg1.append("svg:path").attr("d", line(dataset[0].months));

And here's where I transition it:

svg1.select("path")
    .transition()
    .ease("linear")
    .duration(1000)
    .attr("d", line(dataset[count].months));

I've seen other questions addressing d3 line transitions but none that seem to address my issue, so I hope I'm not a repeater. Thanks in advance!

Note: I did try putting the delay() function in after transition which didn't work. I'm assuming this is because the line is a single <path> instead of multiple <rect> elements...

The problem is that the `path` is a single element. [This question](http://stackoverflow.com/questions/13408144/simple-path-transition) should help though. — Lars Kotthoff, Mar 11 '14 at 18:59
I understand, I was hoping I could update the points (the d attribute) one by one. I guess the answer is to append multiple paths and transition them individually. Thanks for your help! — Greg Venech, Mar 12 '14 at 21:05
The alternative is to use the `stroke-dasharray` property and animate that as in the answer to the question I've linked to. — Lars Kotthoff, Mar 12 '14 at 21:16

Greg Venech · Accepted Answer · 2015-11-13T01:58:15.947

So this fell off my radar for a while, but I had some time the other day and figured out one approach for doing the delayed transition...

Here is the pen I wrote. I generated some random data and created a simple line chart to showing stock prices to play around with. The trick here is instead of iterating through a selection of elements using transition, we iterate through the dataset updating it point by point and transitioning the line as we go:

dataset.forEach(function(item, index) {
  let set = dataset.slice();

  // Update the current point in the copy
  set[index].price = newPrice();

  stock_line.transition()
            .delay(index * 500)
            .attr('d', line_generator(set));
});

Admittedly this is a bit hacky and possibly overkill, you could just update the whole line at once. Also @Lars mentioned the possibility of using the stroke-dashoffset trick to accomplish this as well. I have played around with that method to animate drawing the line but I'm not sure how I'd use it to accomplish the same delayed animation shown in the pen. If there is a less hacky implementation please let me know and I'll update this answer.

Using D3, how can I transition a line one point at time?

1 Answers1