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)

您需要返回内插器而不是原点。

为什么我的d3弧转换不起作用？

1 个答案: