Kolejność segmentów wykresu pączków (pączków) w D3

Question

Mam tabelę pączków zbudowaną przy użyciu narzędzia d3 z suwakiem jQuery, który umożliwia użytkownikowi wybór między różnymi punktami danych. Wykres animuje przejście między wartościami danych i wszystko jest w porządku.

Problem: Segmenty zawsze są renderowane w kolejności zgodnej z ruchem wskazówek zegara (od największego do najmniejszego). Oznacza to, że segmenty zmieniają swoją pozycję wokół wykresu w zależności od ich wielkości.

Takie zachowanie jest mylące dla użytkowników, ale niestety nie mogę wymyślić, jak to zmienić. Chciałbym, aby segmenty pozostały w swojej pierwotnej pozycji.

pracujących js-skrzypce: http://jsfiddle.net/kerplunk/Q3dhh/

Wierzę, że problem musi leżeć w funkcji, która robi rzeczywistego niego animację:

// 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 automatycznie sortuje według wartości dla wykresów kołowych. Na szczęście, wyłączenie sortowania jest dość proste, wystarczy użyć metody sort(null) na funkcję donut, tj .:

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

Oto fiddle.