Torten (Donut) Diagramm-Reihenfolge in D3

Question

Ich habe ein Donut-Diagramm mit d3 mit einem jQuery-Schieberegler, mit dem ein Benutzer zwischen verschiedenen Datenpunkten auswählen können. Das Diagramm animiert den Übergang zwischen Datenwerten und alles ist gut.

Das Problem: Die Segmente werden immer in umgekehrter Reihenfolge (vom größten zum kleinsten) gerendert. Dies bedeutet, dass Segmente ihre Position abhängig von ihrer Größe um das Diagramm herum verschieben.

Dieses Verhalten ist für Benutzer verwirrend, aber leider kann ich nicht herausfinden, wie man es ändert. Ich möchte, dass die Segmente in ihrer ursprünglichen Position bleiben.

Arbeits js-Geige: http://jsfiddle.net/kerplunk/Q3dhh/

glaube ich, das Problem in der Funktion liegen muss, die die eigentliche tweening tut:

// 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 sortiert automatisch von Wert für Kreisdiagramme. Zum Glück, Sortierung zu deaktivieren ist ganz einfach, benutzen Sie einfach die sort(null) Methode auf der donut Funktion, d.h .:

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

hier ein fiddle.