排序d3.js堆叠条形图

Sorting a d3.js stacked bar chart

本文关键字：条形图 js d3 排序      更新时间：2023-09-26

目前这个堆叠条形图是根据每个条形图的总数从左到右排序的。我如何对每个单独的栏进行排序，而不是按键排序每个单独的栏(即5岁以下在底部，65岁及以上在顶部)，而是按值排序每个单独的栏(最大在底部，最小在顶部)。

例如:

当前CA栏是这样堆叠的(从下到上)

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

我希望它像这样堆叠(从下到上)

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

只是为了清楚，我需要能够在客户端做到这一点(即改变原始数据的顺序或格式不是一个选项)。

您链接到的条形图示例直接从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]}; });

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

相关文章：