D3.js - एकाधिक छल्ले के साथ डोनट चार्ट

Question

निम्नलिखित उदाहरण D3.js में एक डोनट चार्ट दिखाता है, क्या चार्ट में एक से अधिक अंगूठी जोड़ना संभव है?

var dataset = { 
    apples: [53245, 28479, 19697, 24037, 40245], 
}; 

var width = 460, 
    height = 300, 
    radius = Math.min(width, height)/2; 

var color = d3.scale.category20(); 

var pie = d3.layout.pie() 
    .sort(null); 

var arc = d3.svg.arc() 
    .innerRadius(radius - 100) 
    .outerRadius(radius - 50); 

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .append("g") 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

var path = svg.selectAll("path") 
    .data(pie(dataset.apples)) 
    .enter().append("path") 
    .attr("fill", function(d, i) { return color(i); }) 
    .attr("d", arc); 

उदाहरण: http://jsfiddle.net/gregfedorov/Qh9X5/9/

तो में अपने डेटा सेट मैं निम्नलिखित की तरह कुछ हैं:

var dataset = { 
    apples: [53245, 28479, 19697, 24037, 40245], 
    oranges: [53245, 28479, 19697, 24037, 40245], 
    lemons: [53245, 28479, 19697, 24037, 40245], 
    pears: [53245, 28479, 19697, 24037, 40245], 
    pineapples: [53245, 28479, 19697, 24037, 40245], 
}; 

क्या मैं चाहता हूँ सभी एक ही केंद्रीय बिंदु के आसपास कुल 5 के छल्ले है, क्या यह संभव है और क्या किसी के पास कोई उदाहरण है?

Answer 1

हां, आप इसे आसानी से कर सकते हैं। कुंजी nested selections का उपयोग करना है। यही है, आप सूचियों की अपनी शीर्ष स्तर सूची में प्रवेश करते हैं और प्रत्येक सूची के लिए एक कंटेनर तत्व बनाते हैं। फिर आप नेस्टेड चयन करते हैं और वास्तविक तत्व खींचते हैं। इस विशेष मामले में, आपको आर्कों की त्रिज्या को समायोजित करने की भी आवश्यकता है ताकि वे ओवरलैप न हों।

var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g"); 
var path = gs.selectAll("path") 
    .data(function(d) { return pie(d); }) 
.enter().append("path") 
    .attr("fill", function(d, i) { return color(i); }) 
    .attr("d", function(d, i, j) { 
    return arc.innerRadius(10+cwidth*j).outerRadius(cwidth*(j+1))(d); 
    }); 

अपडेट किया गया jsfiddle here।

Answer 2

बेला आप पोस्ट का उपयोग करते हुए, एक "चाप" बेला यहाँ में परिभाषित किया गया है:

var path = svg.selectAll("path") 
    .data(pie(dataset.apples)) 
    .enter().append("path") 
    .attr("fill", function(d, i) { return color(i); }) 
    .attr("d", arc); 

तो अगर:

var arc = d3.svg.arc() 
    .innerRadius(radius - 100) 
    .outerRadius(radius - 50); 

कि चाप क्या अंगूठी ग्राफ यहाँ का निर्माण करने के लिए प्रयोग किया जाता है आपने विभिन्न प्रकार के रेडियो के साथ अपने प्रत्येक डेटा सेट के लिए एक अलग चाप बनाया है, आपके चार्ट में अतिरिक्त रिंग होंगे।