javascript - 带有子类别的 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对象。我会在该组上使用转换，将其向右移动列表中的位置。然后当你以后处理个人rects 时，你不必计算月份的正确位置。这也将使标签更容易，并且一如既往地很好地分离关注点。然后，您可以将内部列表绑定到rect's 并添加一点颜色以提供上图所示的图表。

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/