如何用D3.js生成指定分位数并精准复刻对应图例？

我需要用D3.js复刻分位数图例，已经有自定义算法逻辑，但不清楚如何用D3落地实现。给定数据数组如下：

[
24.17,
24.58,
24.82,
24.91,
26.25,
28.04,
29.67,
32.06,
32.08,
32.4,
32.53,
32.58,
32.94,
33.89,
34.15,
34.84,
35.39,
37.64,
40.75,
42.31,
46.89
]

要求实现一个函数，传入该数组和分位数数量（仅支持3、4、5），输出对应的图例。注意：3分位数实际包含2个分界值（包含最值），4、5分位数同理。颜色范围固定为：

• colorbase: rgb(231, 25, 32)
• colorLimit: rgb(245, 163, 166)

之前参考的方案存在精度问题，比如针对上述数据，预期分位值应为>32.15%、32.06%/34.15%、<32.06%，但实际得到>31.26%、33.98%/31.26%、<33.98%。以下是我自行实现的非D3版本代码，需要基于这个逻辑精准复现图例效果：

export const calcularCuantiles = (data, numQuantiles) => {
  data.sort((a, b) => a - b);
  var n = data.length;
  var quantiles = [];

  for (var i = 1; i < numQuantiles; i++) {
    quantiles.push(Math.ceil(i * (n - 1) / numQuantiles)); // 向上取整
  }
  // 添加最后一个索引，即n - 1
  quantiles.push(n - 1);
  var quantileValues = quantiles.map(q => d3.quantile(data, q / (n - 1)));
  // 移除数组最后一个元素（最后一次循环重复添加的）
  quantileValues.pop();
  // 将分位值按从大到小排序
  quantileValues.sort((a, b) => b - a);
  return quantileValues;
}

内容的提问来源于stack exchange，提问作者pabeni