d3 гистограмма с подкатегориями

Question

Возможно ли иметь подкатегории на гистограмме в d3? Я не думаю, что это возможно из коробки, но, возможно, у кого-то есть идея, как это сделать. Примером может служить реализация продукции (A, B, C) в месяц:

= = 
    = =  = 
    = = = = = 
    = = = = = = 
+-+-+-+-+-+-+-+-+- ... 
| A B C | A B C | ... 
| Jan | Feb | ... 

Я не знаю, как я бы идти о добавлении другого набора данных в виде гистограммы.

Answer 1

Возьмите каждый набор данных, которые вы имеете, добавил его в список, а затем перенести данные.

var dataA = [1, 2, 3, 4, 5]; 
var dataB = [5, 4, 3, 2, 1]; 
var dataC = [5, 4, 3, 4, 5]; 

var dataAll = [dataA, dataB, dataC]; 
var dataT = d3.transpose(dataAll); 

В D3.js это не так уж сложно и d3.transpose будет транспозиция данных для вас. Самая сложная часть действительно делает так, что ее легко читать/обновлять. Привяжите внешний список к объекту g. Я бы использовал преобразование в этой группе, чтобы сдвинуть его вправо по позиции в списке. Затем, когда вы имеете дело с отдельными rect с, вам не нужно вычислять правильное положение месяца. Это также упростит этикетки и, как всегда, хорошее разделение проблем. Вы можете привязать внутренний список к rect и добавить немного цвета, чтобы отобразить приведенную выше диаграмму.

var chart = d3.selectAll('#chartArea') 
    .append('svg') 

var month = chart.selectAll('g') 
    .data(dataT) 
    .enter() 
     .append('g') 
     .attr('transform', function(d,i){return 'translate(' + x(i) + ', 0)';}); 

month.selectAll('rect') 
    .data(function (d) {return d;}) 
    .enter() 
     .append('rect') 
     .attr('x', function(d, i){return x(i/groups);}) 
     .attr('y', function(d){return h-y(d);}) 
     .attr('width', function(){return x(1/groups);}) 
     .attr('height', function(d){return y(d);}) 
     .attr('fill', function(d, i){return groupColor(i);}) 

рабочий пример на JSFiddle http://jsfiddle.net/hKvwa/