对d3.js堆积条形图进行排序

Question

目前，此stacked bar chart根据每个条的总和从左到右排序。我如何对每个单独的条进行排序，以便不是按键对每个单独的条进行排序（即5岁以下，65岁以上是在顶部），它将按值对每个单独的条进行排序（最大）在底部，在顶部最小）。

例如：

目前，CA栏的堆叠方式如下（从下到上）

CA,2704659,4499890,2159981,3853788,10604510,8819342,4114496

我希望它像这样叠加（从下到上）

CA,10604510,8819342,4499890,4114496,3853788,2704659,2159981

为了清楚起见，我需要能够在客户端执行此操作（即，无法更改原始数据的顺序或格式）。

Answer 1

您链接到的条形图示例直接从CSV获取值的顺序（通过色标的域）。实际堆叠是在这一行完成的：

d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });

堆叠顺序取决于color.domain()返回名称的顺序。要更改顺序，您需要做的就是对您到达的值进行排序。要对每个条形按单个细分的值进行排序，您可以使用

var order = color.domain().map(function(d) { return d; })
                 .sort(function(a, b) { return +d[b] - +d[a]; });

这将从色标的域中获取名称，然后按照sort函数中引用的值按降序对它们进行排序。然后，这个新数组order用于堆叠：

d.ages = order.map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });

其余代码保持不变。完整演示here。