如何在饼图中保持切片的顺序固定？ [d3]答案

【问题标题】：How to keep the order of slices fixed in a pie chart? [d3]如何在饼图中保持切片的顺序固定？ [d3]
【发布时间】：2022-01-13 01:24:37
【问题描述】：

我有这个对象数组

const data = [
 {id: 0, type: "inc", amount: 3000},
 {id: 1, type: "exp", amount: 1500}
]

当我将此数据传递给 d3 饼函数时

const pie = d3.pie().value(d => d.amount);

inc 条目将具有 index: 0，而 exp 条目将具有 index: 1。我的理解，d3默认分配最大值index 0，这意味着startAngle将是最大值为0，并按值的降序排列。

就我而言，应用程序可以更改任一条目的数量。一旦exp 的数量超过inc 的数量，d3 的默认行为将交换饼图中inc 和exp 的顺序。我希望inc 类型的条目始终从startAngle 0 开始，即使exp 条目的数量超过inc 条目的数量。我怎样才能做到这一点？

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

对于那些对答案感兴趣的人，原来你可以像这样在pie 函数的sort 方法中定义一个compare 函数

const pie = d3.pie().value(d => d.amount).sort((a) => {
      if (a.type === 'inc') {
        return -1;
      } else {
        return 1;
      }
    });

这将使inc 条目始终与index: 0 保持一致，无论amount 值与exp 条目相比如何

【讨论】：