使用d3 js弧插值动画仅起始角度

Question

需要使用动画attrTween更改起始角度，并使用d3.js更改圆弧的持续时间

这是我尝试过的小提琴。

http://jsfiddle.net/87e3d4tj/

var duration = 2000;
var startAngle = -90 * (Math.PI/180);
var endAngle = 30 * (Math.PI/180);

var svg = d3.select("svg")
.append("g")
.attr("transform", "translate(150,75)");

var arc = d3.arc()
  .innerRadius(50)
  .outerRadius(50)
  .startAngle( -90 * (Math.PI/180) )
  .endAngle( 90 * (Math.PI/180) );

svg.append("path")
    .attr('d', arc)
  .attr('id', 'my-path')
  .attr("fill", "none")
  .attr("stroke-width", 3)
  .attr("stroke", "blue");
/* more on the jsfiddle */