How to unroll multiple lines using D3, one after another... without code duplication?

Question

Mike Bostock has great example of a multi-series linechart here, which draws three series using compact code. Rather than drawing each line individually from the raw data, he creates a new data object ("cities") to iterate over, then draws all three path elements in one go:

var city = svg.selectAll(".city")
  .data(cities)
.enter().append("g")

[... etc] But suppose we wanted to animate this chart, so that each city's line "unrolled" one after another? Is such a thing possible, using Bostock's data structure?

First we'd create a tween function to unroll the lines smoothly (as demonstrated in this question). Something like:

function animateLine() {
    var l = this.getTotalLength();
    i = d3.interpolateString("0," + l, l + "," + l);
    return function(t) { return i(t); };
};

But if we invoked this animation as a transition in Mike Bostock's line-drawing code, wouldn't it just unroll all three lines simultaneously, rather than one after another?

I can see a hacky solution, which would be to define three separate (but basically identical) functions to draw each line one at a time, based on some lightly modified raw data...

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

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

... [etc.] called in three separate line-drawing functions, invoking our "animateLine" function –

function AustinPath () { 
                var line = svg.append("path")
                    .datum(data)
                    .attr("d", AustinLine)
                .transition()
                    .duration(2000)
                    .ease("linear")
                    .attrTween("stroke-dasharray", animateLine);

... [repeated twice more for the other cities: NewYorkPath and SanFranciscoPath]...

... then finally invoke these functions one after another, with the appropriate delays, to draw the lines one by one.

setTimeout(Austinpath, 500);
setTimeout(NewYorkPath, 2500);
setTimeout(SanFranciscoPath, 4500);

... [etc.]

This would unroll each line one by one, but the repetition in the code is mind-boggling, and totally contrary to the elegance of Mike Bostock's original example.

I know the hacky solution is terrible... but is there a more elegant alternative? Can Mike Bostock's original "enter().append" method be staggered, to draw three separate lines in turn?

Any suggestions greatly appreciated. Thanks in advance.

Answer 1

The question you've linked to for the line unrolling uses D3's transition framework, so you don't need anything else to make them appear one after the other. The key here is the .delay() function, which allows you to specify the time after which a transition should start. It can take, as almost everything else in D3, a function that gets passed the current data and index instead of a static value.

So knowing that the unrolling takes a second, we can set the delay like this:

.delay(function(d, i) { return i * 1000; })

That is, delay the transition of each element by its index times 1 second. Adding this code just after .transition() takes care of what you want.

The only snag, as you've discovered, is that the lines will be drawn initially, before disappearing and unrolling. This is because you're setting the d attribute of the lines to its proper (end) value before starting the transition. To avoid this effect, simply set the stroke-dasharray property to the value it has at the beginning of the transition (animateLine(0)) before adding the transition -- "0," + this.getTotalLength(). Complete demo of this here.