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

Stroke-dasharray 在多条路径上补间

Stroke-dasharray tween on multiple paths

javascript

interpolation

tween

d3.js