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，但所有其他代码都相同。

使用.attrTween方法延迟动画弧

1 个答案: