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

【问题标题】：I can tween a D3 arc's endAngle, but not it's startAngle. What am I doing wrong?我可以补间 D3 弧的 endAngle，但不是 startAngle。我究竟做错了什么？
【发布时间】：2014-04-01 17:23:33
【问题描述】：

我只是在玩这个演示并自己重新创建它：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 的正确方法是什么？

【问题讨论】：

愚蠢的问题：新旧的起始角度真的不同吗？此外，您似乎没有在任何地方使用您的论点 newStart 和 newEnd。
另外，你确定你的 arc 函数实际上使用了数据对象的起始角度，而不是一个常数值吗？

标签： javascript d3.js

【解决方案1】：

有几处需要修改。在原始脚本中，弧函数中的起始值固定为 0。那么，由于弧不提供起始值，它是通过基准提供的。

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

瞧：http://jsfiddle.net/breizo/h74f180b/

【讨论】：