title: Pie (donut) chart segment order in D3
body: <p>I have a donut chart built using d3 with a jQuery slider that allows a user to select between different data-points. The chart animates the transition between data values and all is well. </p>
  
  <p><strong>The problem:</strong> The segments always render in anti-clockwise size order (from largest to smallest). This means that segments switch their position around the chart depending on their size. </p>
  
  <p>This behaviour is confusing for users, but unfortunately I can't work out how to change it. I would like the segments to stay in their initial position.</p>
  
  <p>Working js-fiddle: <a href="http://jsfiddle.net/kerplunk/Q3dhh/" rel="noreferrer">http://jsfiddle.net/kerplunk/Q3dhh/</a></p>
  
  <p>I believe the problem must lie in the function which does the actual tweening:</p>
  
  <pre><code>// Interpolate the arcs in data space.
  function pieTween(d, i) {
    var s0;
    var e0;
    if(oldPieData[i]){
      s0 = oldPieData[i].startAngle;
      e0 = oldPieData[i].endAngle;
    } else if (!(oldPieData[i]) &amp;&amp; oldPieData[i-1]) {
      s0 = oldPieData[i-1].endAngle;
      e0 = oldPieData[i-1].endAngle;
    } else if(!(oldPieData[i-1]) &amp;&amp; oldPieData.length &gt; 0){
      s0 = oldPieData[oldPieData.length-1].endAngle;
      e0 = oldPieData[oldPieData.length-1].endAngle;
    } else {
      s0 = 0;
      e0 = 0;
    }
    var i = d3.interpolate({startAngle: s0, endAngle: e0}, {startAngle: d.startAngle, endAngle: d.endAngle});
    return function(t) {
      var b = i(t);
      return arc(b);
    };
  }
  </code></pre>