Pasta (donut) grafik segmenti siparişi D3

Question

Kullanıcının farklı veri noktaları arasında seçim yapabilmesini sağlayan jQuery kaydırıcısına sahip d3 kullanılarak oluşturulan bir çörek çizelgem var. Grafik, veri değerleri arasındaki geçişi canlandırır ve her şey iyi.

Sorun: Segmentler, her zaman saat yönünün tersine boyut sırasına göre işlenir (en büyüğünden en küçüğüne). Bu, segmentlerin boyutlarına bağlı olarak pozisyonlarını grafik etrafında değiştirdiği anlamına gelir.

Bu davranış kullanıcılar için kafa karıştırıcı, ancak ne yazık ki nasıl değiştirileceğini öğrenemiyorum. Segmentlerin başlangıç ​​pozisyonlarında kalmasını isterim.

çalışma js-keman: http://jsfiddle.net/kerplunk/Q3dhh/

Sorunun gerçek tweening yapar işlevinde yer almalıdır inanıyorum:

// 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 otomatik pasta grafikler için değerine göre sıralar. Neyse ki, sıralamayı devre dışı bırakılması sadece donut işlevini sort(null) yöntemi, yani .:

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

İşte fiddle var kullanmak oldukça kolaydır.