Stroke-dasharray tween on multiple paths

Question

I am projecting multiple line paths on a map and hoping to use stroke-dash interpolation on them to show path movements.

I want to use the same Tween function on all the paths, but it seems as though the Tween is returning the same value for every path. All of the lines seem to be projecting fine; it's only the Tween that's causing some issue.

It causes this issue, where the paths show stroke-dashes:

It should instead look like the following:

My lines are projected using the following standard process for a leaflet x/y conversion:

var svg = d3.select(map.getPanes().overlayPane).append("svg");

var g = svg.append("g").attr("class", "leaflet-zoom-hide");
var transform = d3.geo.transform({
            point: projectPoint
        });
    var d3path = d3.geo.path().projection(transform);

    var toLine = d3.svg.line()
      .interpolate("linear")
        .x(function(d,i) {
            return applyLatLngToLayer(d).x
        })
        .y(function(d,i) {
            return applyLatLngToLayer(d).y
        });

    g.selectAll(".lineConnect").remove();

    var linePath = g.selectAll(".lineConnect")
        .data(series)
        .enter()
        .append("path")
        .attr("class", "lineConnect")

        linePath.attr("d", toLine)

And here you see the function that calls the Tween:

 function transition() {
            linePath.transition()
                .duration(700).attrTween("stroke-dasharray", tweenDash);     
 } 
 function tweenDash() {
            return function(t) {
                var l = linePath.node().getTotalLength(); 
                interpolate = d3.interpolateString("0," + l, l + "," + l);
                return interpolate(t);
            }
 } 

Answer 1

Your code assumes that you have only a single element in the selection ( linePath.node() ) -- you're getting the length of the first element only. You could use for example .each() to make it work for every line:

function transition() {
        d3.select(this).transition()
            .duration(700).attrTween("stroke-dasharray", tweenDash);     
 } 
 function tweenDash() {
        var that = this;
        return function(t) {
            var l = that.getTotalLength(); 
            interpolate = d3.interpolateString("0," + l, l + "," + l);
            return interpolate(t);
        }
 }

 linePath.each(transition);