title: make a circle progress bar, but animate arc.endAngle (angle >180 degree) stops working in d3.js
body: <p>I am running D3.js to draw a progress bar in circle shape, which you will see the <a href="http://jsfiddle.net/helxsz/bb8ZS/" rel="nofollow">demo</a> on jsfiddle , the progress bar has a transition animation.</p>
  
  <p>The main code is </p>
  
  <pre><code>var width = 960,
      height = 500,
      twoPi = 2 * Math.PI,
      progress = 0,
      total = 1308573, // must be hard-coded if server doesn't report Content-Length
      formatPercent = d3.format(".0%");
  
  var arc = d3.svg.arc()
      .startAngle(0)
      .innerRadius(0)
      .outerRadius(240);
  
  var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
    .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
  
  var meter = svg.append("g")
      .attr("class", "progress-meter");
  
  meter.append("path")
      .attr("class", "background")
      .attr("d", arc.endAngle(twoPi));
  
  var foreground = meter.append("path")
      .attr("class", "foreground");
  
  foreground.attr("d", arc.endAngle(twoPi * 0))
  
  foreground.transition().duration(1500).attr("d", arc.endAngle( twoPi * 2/3  ));     
  
  var text = meter.append("text")
      .attr("text-anchor", "middle")
      .attr("dy", ".35em");
  </code></pre>
  
  <p>to make the progress bar move, we only need to change to the arc.endAngle(), which is on the line.</p>
  
  <pre><code>foreground.transition().duration(1500).attr("d", arc.endAngle( twoPi * 2/3  ));
  </code></pre>
  
  <p>if the angle is less than 180, ( endangle &lt; twoPi*1/2), then the animation works fine, but when the angle is larger than 180, so means endangle >= twoPi*1/2. then the animation would not show, and if you look at the console, you will find many errors on d3.js</p>
  
  <pre><code>Error: Problem parsing d="M1.1633760361312584e-14,-190A190,190 0 1.481481481481482e-7,1 -0.000022772330200401806,-189.9999883969182L0,0Z" meeting.html:1
  2
  Error: Problem parsing d="M1.1633760361312584e-14,-190A190,190 0 2.56e-7,1 -0.00003935058659476369,-189.99997994987467L0,0Z"
  </code></pre>
  
  <p>so what is the exact problem for this, how to solve it      </p>