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

Solution 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/