CODEWITHSUNDEEP
d3.jslinetransition
Greg Venech
Greg Venech

Reputation: 9030

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

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

Upvotes: 1

Views: 1652

Answers (1)

Greg Venech
Greg Venech

Reputation: 9030

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.

Upvotes: 1

Related Questions