Stroke-dasharray在多条路径上补间

Question

我在地图上投射多条线路径并希望在它们上使用stroke-dash interpolation来显示路径移动。

我想在所有路径上使用相同的Tween函数，但似乎Tween为每个路径返回相同的值。所有线条似乎都很好;它只是导致某些问题的Tween。

它会导致此问题，其中路径显示stroke-dashes：

它应该如下所示：

我的线条使用以下标准流程投影进行传单x / y转换：

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)

在这里，您可以看到调用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

您的代码假定您在选择中只有一个元素（linePath.node()） - 您只获得第一个元素的长度。您可以使用例如.each()使其适用于每一行：

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);