多个路径上的Stroke-dasharray补间

Question

我正在地图上投影多条线路径，并希望在它们上使用笔划划线插值来显示路径运动。

我想在所有路径上使用相同的Tween函数，但是似乎Tween对于每个路径都返回相同的值。 所有的线条似乎都很好。 只是Tween引起了一些问题。

导致出现此问题，其中路径显示笔划破折号：

而是应如下所示：

我的行是使用以下标准流程投影的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);