Javascript 沿多条路径设置圆动画

我正在尝试创建一个动画，其中圆在多条路径上被设置动画

我能够为其中一条路径获得所需的动画，但不确定为什么圆仅在该特定路径上设置动画，而不是根据它们所属的路径分布

完整代码可在我的bl.ocks页面上找到：

这是它的主要部分

var path = svg.selectAll("path")
      .data(data.filter(function(d){
        return d.From > 2010
      }))
      .enter()
      .append("path")
      .style("stroke", "#832129")
      .attr("class", "arc")
      .attr("d", function(d){
        var To_scale = xScale(d.experience),
            From_scale = xScale(0),
            y = yScale(0),
            dx = To_scale - From_scale,
            dy = y,
            dr = Math.sqrt(dx * dx + dy * dy);
        return "M" + From_scale + " " + y + " A 43 50 0 0 1 " + To_scale + " " + y;
      })
      .style("fill", "none")
      .style("opacity", 0)
      .call(transition)
      .on("mouseover",  function(d){
        var thisClass = d3.select(this).attr("class")
          d3.selectAll(".path").style("opacity", 0.1)
          d3.select(this).style("stroke", "white").style("opacity", 1).style("stroke-width", 2)

        })
        .on("mouseout",  function(d){
          d3.select(this).style("stroke", "#832129").style("opacity", 1)
        })





      function transition(path){
        path.each(function(PathItem, index){
         d3.select(this).transition()
          // .delay(index + 200)
          .duration(index * 5 + 1000)
          .on("start", function(){
            d3.select(this).style("opacity", 1)
          })
          .attrTween("stroke-dasharray", tweenDash)
        })

      }

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

      console.log(data[0])


var circle = svg.selectAll("circle")
    .data(data.filter(function(d){
        return d.From > 2010
      }))
    .enter()
    .append("circle")
    .attr("r", 5)
    .attr("cx", function(d){
      return xScale(d.experience)
    })
    .style("fill", "red")
    .attr("transform", "translate(" + 0 + ")")
    .style("opacity", 0)

transition_circles();

  function transition_circles(){
      circle.each(function(pathItem, index){
      d3.select(this)
      .transition()
      .delay(index * 200)
      .duration(index * 10 + 1000)
      .on("start", function(){
        d3.select(this).style("opacity", 1)
      })
      .on("end",function(){
        d3.select(this).style("opacity", 0)
      })
      .attrTween("transform", translateAlong(path.node(), index))
      })


    }

    function translateAlong(path, index){
     var l = path.getTotalLength();
      return function(d, i , a){
        return function(t){
          var p = path.getPointAtLength(t * l);
          return "translate(" + p.x + "," + p.y + ")";
          }
        }
    }

基本上，我按照这个例子来获得沿路径插值的点，但是我很难调整它以在多条直线上获得相同的效果

---

我还尝试将

.attr（“cx”，函数（d）{return d.experience}

添加到圆中，但没有成功。

您总是将相同的路径（第一条路径）传递到

translateLong

函数：

.attrTween("transform", translateAlong(path.node(), index))
//this is always the first path ---------^

您必须向

translateLong

函数传递不同的路径。有不同的方法（我不知道您想要哪种），其中之一是：

.attrTween("transform", translateAlong(path.nodes()[index], index))

在这种方法中，圆的索引从0到数据数组长度减1。因此，由于

path.nodes（）

是一个元素数组，因此它通过索引选择不同的元素

以下是更新的bl.ocks：

---

PS：关于优化，您不需要在同一位置绘制多条路径！现在您有几十条完全相同的路径。只需绘制不同的路径（在您的情况下，只有3条）。

非常感谢！您能解释一下添加[索引]时发生了什么吗？不确定这是怎么回事working@Julien我在答案中加了一点解释。