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

Question

目前,此堆叠条形图基于每个条的总数从左到右排序.我如何对每个单独的条进行排序,以便不用按键对每个单独的条进行排序(即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]}; });

其余代码保持不变.在这里完成演示.