我可以补充D3弧的endAngle，但不是它的startAngle。我究竟做错了什么？

Question

我正在玩这个演示并自己重新创建：http://bl.ocks.org/mbostock/5100636

我可以定义一个新的endAngle，它的动画效果很好，但现在我也试图为startAngle制作动画。我无法让它发挥作用。

function animateArc(newStart, newEnd) {

    myArc.transition().duration(750).call(arcTween, newStart, newEnd);

    function arcTween(transition, newStart, newEnd) {
        transition.attrTween("d", function(d) {
            var interpolateStart = d3.interpolate(d.startAngle, startAngle);
            var interpolateEnd = d3.interpolate(d.endAngle, endAngle);
            return function(t) {
                d.startAngle = interpolateStart(t);
                d.endAngle = interpolateEnd(t);
                return arc(d);
            };
        });
    }
}

我没有任何错误，endAngle仍然是动画，但我添加的startAngle代码实际上只是被忽略了。

补间弧的startAngle的正确方法是什么？

Answer 1

有一些事情需要修改。 在原始脚本中，起始值在arc函数中固定为0。 然后，由于arc不提供起始值，因此通过数据提供。

var arc = d3.svg.arc()
        .innerRadius(90)
        .outerRadius(150);

var background = svg.append("path")
        .datum({
        endAngle: τ,
        startAngle: 0
    })

var foreground = svg.append("path")
        .datum({
        endAngle: .127 * τ,
        startAngle: -.127 * τ
    })

Et voila：http://jsfiddle.net/breizo/h74f180b/