对一个d3.js堆叠条形图进行排序

Question

目前这个堆积条形图是根据每个条形的总和从左到右排序的。如何使每个单独的条形图按值排序，而不是按键排序（例如：5岁以下在底部，65岁及以上在顶部）。

例如：

当前CA条形图的堆叠方式如下（从下到上）

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

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

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

为了明确，我需要能够在客户端完成此操作（即，更改原始数据的顺序或格式不是选项）。

- diasks2

---

你可以使用 stack.order()，但这会影响所有条形图的顺序。我认为，除非你为每个条形图使用单独的堆栈布局，否则D3不允许你对每个条形图进行不同的排序。 - Lars Kotthoff

@LarsKotthoff 我不需要对每个单独的条形图进行不同的排序。每个条形图内部的排序顺序应该是相同的（升序或降序）。如果您可以向我展示如何使用 stack.order() 来实现这一点，我将非常感激。 - diasks2

哦，等一下，这个例子实际上并没有使用堆栈布局。这让事情变得更容易了——你只需要按照自己想要的方式对 d.ages 进行排序（在 data.forEach 循环内部）。你甚至可以为不同的条形图设置不同的顺序！ - Lars Kotthoff

@LarsKotthoff，你能否给我展示一个基于我在问题中列出的条形图的代码示例吗？我很难让你建议的内容正常工作。 - diasks2

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]}; });

其余代码保持不变。完整演示在这里。

- Lars Kotthoff