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的指標來代替。 我還添加了如何對組進行排序。