D3中的Pie（圓環）圖表分段順序

Question

我有一個使用d3構建的圓環圖，其中包含一個jQuery滑塊，允許用戶在不同的數據點之間進行選擇。 該圖表為數據值之間的過渡提供了動畫，一切都很好。

問題：片段始終以逆時針大小順序呈現（從最大到最小）。 這意味着段根據其大小在圖表周圍切換位置。

這種行為讓用戶感到困惑，但不幸的是我無法弄清楚如何更改它。 我希望細分市場能夠保持初始狀態。

工作js-fiddle： http ： //jsfiddle.net/kerplunk/Q3dhh/

我認為問題必須在於實際補間的功能：

// 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]) && oldPieData[i-1]) {
    s0 = oldPieData[i-1].endAngle;
    e0 = oldPieData[i-1].endAngle;
  } else if(!(oldPieData[i-1]) && oldPieData.length > 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);
  };
}

Answer 1

d3自動按餅圖的值排序。 幸運的是，禁用排序非常簡單，只需在donut功能上使用sort(null)方法，即：

var donut = d3.layout.pie().value(function(d){
    return d.itemValue;
}).sort(null);

這是一個小提琴 。