javascript - 沿多条路径动画圆圈

Question

我正在尝试创建一个动画，其中圆圈在多条路径上进行动画处理。

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

完整代码可以在我的 bl.ocks 页面上找到:https://bl.ocks.org/JulienAssouline/4a11b54fc68c3255a85b31f34e171649

这是它的主要部分

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 + ")";
          }
        }
    }

基本上，我是按照这个https://bl.ocks.org/mbostock/1705868例如获取沿路径点插值，但我无法调整它以在多条线上获得相同的效果。

我还尝试将 .attr("cx", function(d){ return d.experience} 添加到圆圈中，但这没有用。

Answer 1

您始终将相同的路径(第一个)传递给 translateAlong 函数:

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

您必须将不同的路径传递给 translateAlong 函数。有多种方法可以做到这一点(我不知道你想要哪种)，其中之一是:

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

在这种方法中，圆圈的索引从 0 到数据数组长度减 1。因此，由于 path.nodes() 是一个元素数组，它通过它们选择不同的元素指数。

这是更新的 bl.ocks:https://bl.ocks.org/anonymous/f54345ed04e1a66b7cff3ebeef271428/76fc9fbaeed5dfa867fdd57b24c6451346852568

PS:关于优化，不需要在同一个位置画多条路径!现在你有几十条完全相同的路径。只需绘制不同的路径(在您的情况下，只有 3 条)。