javascript - para - grafica de barras

Orden de segmento de gráfico circular(dona) en D3

Question

Tengo un gráfico de donut construido usando d3 con un control deslizante jQuery que permite al usuario seleccionar entre diferentes puntos de datos. El cuadro anima la transición entre los valores de datos y todo está bien.

El problema: los segmentos siempre se procesan en orden de tamaño antihorario (de mayor a menor). Esto significa que los segmentos cambian su posición alrededor del gráfico según su tamaño.

Este comportamiento es confuso para los usuarios, pero desafortunadamente no puedo encontrar la manera de cambiarlo. Me gustaría que los segmentos permanezcan en su posición inicial.

Trabajo js-fiddle: http://jsfiddle.net/kerplunk/Q3dhh/

Creo que el problema debe estar en la función que hace la interpolación real:

// 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 ordena automáticamente por valor para los gráficos circulares. Afortunadamente, deshabilitar la clasificación es bastante fácil, simplemente use el método de sort(null) en la función donut , es decir:

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

Aquí hay un violín .