D3.js stackOrderDescending() 方法

在 D3.js 中，stackOrderDescending() 方法可以用于设定堆栈图表的数据顺序，将具有最大值的数据元素放在最上方。

语法

d3.stackOrderDescending(series);

参数

• series: 数组类型，表示一个包含一系列数据的数组。

返回值

返回一个经过排序的新的数组，其中数据元素按照从大到小排列的顺序排列。

示例

var data = [
  { "x": 1, "y": 20, "z": 30 },
  { "x": 2, "y": 30, "z": 20 },
  { "x": 3, "y": 10, "z": 50 }
];

// 定义堆栈图表的布局
var stack = d3.stack()
  .keys(["y", "z"]);

// 设定数据元素的排列顺序为从大到小
stack.order(d3.stackOrderDescending);

// 为每个数据元素计算堆栈范围
var series = stack(data);

// 输出结果
console.log(series);

输出结果为：

[
  [
    { "x": 1, "y": 20, "y0": 0, "z": 30, "z0": 0 },
    { "x": 2, "y": 30, "y0": 20, "z": 20, "z0": 30 }
  ],
  [
    { "x": 1, "y": 0, "y0": 20, "z": 0, "z0": 30 },
    { "x": 2, "y": 0, "y0": 30, "z": 0, "z0": 20 },
    { "x": 3, "y": 10, "y0": 0, "z": 50, "z0": 0 }
  ]
]

从结果中可以看出，数据元素按照从大到小的顺序排列，y:30 和 z:20 位于堆栈的最上方。