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

Question

我有一个对象数组

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，并按值从大到小的顺序排列。

在我的情况下，应用程序可以更改任一数据项的数量。d3 的默认行为是在 exp 数据项的数量超过 inc 数据项的数量时，在饼图中交换 inc 和 exp 的顺序。我希望类型为 inc 的数据项始终从 startAngle 0 开始，即使 exp 数据项的数量超过了 inc 数据项的数量。我该如何实现这个要求？

- BlackMath

Answer 1

对于那些对答案感兴趣的人，事实证明您可以在pie函数的sort方法中定义一个compare函数，如下所示。

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

这将始终保留具有“index:0”的inc条目，而不受与exp条目相比较的amount值的影响。

- BlackMath