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 arc = d3.svg.arc() 
    .innerRadius(radius - 100) 
    .outerRadius(radius - 50); 

Эта дуга, что используется для создания кольца график здесь:

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

Так что если вы просто сделали другую дугу для каждого из ваших наборов данных с различными радиусами, у вас будут дополнительные кольца в вашей диаграмме.