D3：订单分组柱形图

Question

取this simple grouped column chart。的数据值被传递的格式如下：

{ 
    "Group1": [group1_subvalue1, group1_subvalue2.....], 
    "Group2": [group2_subvalue1, group2_subvalue2.....], 
    .... 
} 

我想每一组单独地排序，即：对于每个状态，从高排序的列窄。但我无法找到一种方法来做到这一点。在给定的例子中，每个组的数组必须是相同的顺序（5岁以下的第一个人，之后的5到13岁，等等），所以我不知道如何面对问题。

Answer 1

为了说明如何分别对每个组进行排序，我花了Mike Bostock's example来相应地调整它。 你必须做以下事情：

1. 您的组内排序类（在本例中它的d.ages阵列）

   d.ages.sort(function(a, b) { return d3.ascending(a.value, b.value); }); 
   

2. X1是你对组内规模类别。不是将类别映射到相同的相对位置，而是将已排序数组的索引映射到x位置。 d3.range（）创建一个数组，它是你的域。

   x1.domain(d3.range(0, data[0].ages.length)).rangeRoundBands([0, x0.rangeBand()]); 
   

3. 当你画，你只需要调用类

   .attr("x", function(d, i) { return x1(i); }) 
   

完整的工作示例是here的指标来代替。 我还添加了如何对组进行排序。