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/