javascript - 使用 .attrTween 方法延迟动画弧

Question

我正在尝试创建动画弧形图。我已经能够创建我想要的动画类型，但我想添加延迟。

我使用 .attrTween 方法创建动画。

这是我的延迟尝试代码的主要部分:

svg.selectAll(".arcs")
      .data(data)
      .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", 1)
      .call(transition)
      .on("mouseover",  function(d){
        var thisClass = d3.select(this).attr("class")
          d3.select(this).style("stroke", "white").style("opacity", 1)
          d3.selectAll(".arcs").style("opacity", 0.1)

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

// DELAY ATTEMPT HERE

function transition(path){
        path.transition()
          .delay(function(d, i){ return i * 1000})
          .duration(2500)
          .attrTween("stroke-dasharray", tweenDash)

      }

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

此方法的问题在于它只是使图表出现而没有延迟或动画。我也尝试过 .delay(100)，但这只会延迟动画。

我希望延迟/动画看起来像这样 https://twitter.com/sxywu/status/937510554310123520弧线接连出现的地方。我只是对为什么 .delay(function(d, i){ return i * 1000}) 不起作用感到困惑。

我的完整代码可以在我的 bl.ocks 页面上看到:https://bl.ocks.org/JulienAssouline/7236f0632102c6e2d3399208c4c90c26

谢谢。

Answer 1

将圆弧的 opacity 设置为 0:

 svg.selectAll(".arcs")
  .data(data)
  .enter()
  .append("path")
  ...
  .style("opacity", 0) // <== !!!
  ...

并以这种方式重写您的transition函数:

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

在这里，我们为您选择的每个项目分别指定一个过渡参数。您可以根据需要使用 delay 和 duration 值。

检查 working example based on your code .我在这里硬编码了你的部分 csv 数据(所有路径都将绘制完整的数据集)以能够使用 jsFiddle，但所有其他代码都相同。