डी 3

Question

में पाई (डोनट) चार्ट सेगमेंट ऑर्डर मेरे पास एक jQuery स्लाइडर के साथ डी 3 का उपयोग करके बनाया गया एक डोनट चार्ट है जो उपयोगकर्ता को विभिन्न डेटा-पॉइंट्स के बीच चयन करने की अनुमति देता है। चार्ट डेटा मानों के बीच संक्रमण को एनिमेट करता है और सब ठीक है।

समस्या: खंड हमेशा घड़ी के आकार के क्रम में (सबसे बड़े से छोटे तक) में प्रस्तुत करते हैं। इसका मतलब है कि सेगमेंट चार्ट के चारों ओर अपने आकार के आधार पर अपनी स्थिति स्विच करते हैं।

यह व्यवहार उपयोगकर्ताओं के लिए भ्रमित है, लेकिन दुर्भाग्य से मैं इसे कैसे बदल सकता हूं यह नहीं कर सकता। मैं सेगमेंट को अपनी शुरुआती स्थिति में रहना चाहता हूं।

कार्य js-बेला: http://jsfiddle.net/kerplunk/Q3dhh/

मेरा मानना ​​है कि समस्या समारोह जो वास्तविक tweening करता है में झूठ चाहिए:

// 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

डी 3 स्वचालित रूप से पाई चार्ट के लिए मूल्य द्वारा क्रमबद्ध करता है। सौभाग्य से, छंटाई अक्षम करने के लिए काफी आसान है, बस donut समारोह पर sort(null) विधि, यानी .:

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

यहाँ एक fiddle का उपयोग करें।