D3 arc with modified start point

base arc chart.js

var width = 500,
    height = 500

// using radian values to apply the a new startAngle value to the graph
// 1.5*PI ~ -180° and 2.5*PI ~ 180° so the radian movement will be incremental from 1.5 -> 2.5 (radians)
var arc = d3.svg.arc()
    .innerRadius(180)
    .outerRadius(220)
    .startAngle( 1.5 * Math.PI);

// Create the SVG container, and apply a transform such that the origin is the
// center of the canvas. This way, we don't need to position arcs individually.
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")

// Add the foreground arc in orange, currently showing 12.7%.
var foreground = svg.append("path")
.datum({endAngle: 1.7 * Math.PI })
    .style("fill", "orange")
    .attr("d", arc);

//arcTween(2 * τ); 
/*
setInterval(function() {
  foreground.transition()
      .duration(750)
      .call(arcTween, Math.random() * τ);
}, 1500);
*/
function arcTween(transition, newAngle) {

  transition.attrTween("d", function(d) {
    var interpolate = d3.interpolate(d.endAngle, newAngle);
    return function(t) {
      d.endAngle = interpolate(t);
      return arc(d);
    };
  });
}