D3.js - диаграммы пончиков с несколькими кольцами

В следующем примере показана диаграмма пончиков в 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 колец в общей сложности вокруг одной и той же центральной точки, возможно ли это, и есть ли у кого-нибудь пример?

Ответ 1

Да, вы можете сделать это довольно легко. Ключ должен использовать вложенные варианты выбора. То есть вы переходите в список списков верхнего уровня и создаете элемент контейнера для каждого списка. Затем вы делаете вложенный выбор и рисуете фактические элементы. В этом конкретном случае вам также необходимо отрегулировать радиусы дуг, чтобы они не перекрывались.

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 здесь.

Ответ 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);

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