I can tween a D3 arc's endAngle, but not it's startAngle. What am I doing wrong?

问题

I'm just playing with this demo and recreating it myself: http://bl.ocks.org/mbostock/5100636

I can define a new endAngle and it'll animate just fine, but now I'm trying to animate the startAngle too. I just can't get it to work.

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);
            };
        });
    }
}

I get no errors of any kind, and the endAngle still animates, but the startAngle code I added is literally just.. ignored.

What is the correct way to tween an arc's startAngle?

回答1:

There are a few things that need to be modified. In the original script, the start value is fixed to 0 in the arc function. Then, since arc doesn't provide for the start value, it is provided through the datum.

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/

来源：https://stackoverflow.com/questions/22792685/i-can-tween-a-d3-arcs-endangle-but-not-its-startangle-what-am-i-doing-wrong