d3.js - 为什么我的 d3 arc 过渡不起作用？

Question

我查看了一堆网络示例，似乎无法让我的弧形过渡具有漂亮的平滑动画。我尝试了两种不同的方法来实现 arcTween，这两种方法都可以在更新时正确重绘我的饼图，但都没有平滑的动画。

  render: (oldData, newData) ->
    return if _.compact(newData).length is 0
    @toggleWidth()
    pieData = @layout(newData)
    oldPieData = @layout(oldData)
    @arcGroup.selectAll("path").data(pieData)
      .enter().append("path")
      .attr("fill", (d,i) => @color(i) )
      .transition()
      .duration(250)
      .attr("d", (d) =>
        @arc()(d)
        )
      .each((d) =>
        this._current = d
      )
    @arcGroup.selectAll("path").data(pieData)
      .transition()
      .attr("fill", (d,i) => @color(i) )
      .transition()
      .duration(250)
      .attrTween("d", (d,i) =>
        @arcTween(oldPieData, d,i));
    @arcGroup.selectAll("path").data(pieData)
      .exit()
      .remove()
      .transition()
      .duration(3000)
      .attrTween("d", (d,i) =>
        @arcTween(oldPieData, d,i));

arcTween 方法的注释来自我实现此方法的不同方式。

  arcTween: (oldData, d, i) =>
    # if oldData[i]
    #   s0 = oldData[i].startAngle
    #   e0 = oldData[i].endAngle
    # else
    #   s0 = 0
    #   e0 = 0
    # i = d3.interpolate({startAngle: s0, endAngle: e0}, {startAngle: d.startAngle, endAngle: d.endAngle}) 
    i = d3.interpolate(this._current, d)
    (t) =>
      b = i(t)
      @arc()(d)

我错过了什么？谢谢！

Answer 1

函数的最后一行arcTween应该是

@arc()(b)

代替

@arc()(d)

您需要返回插值器而不是基准。