如何生成这些分位数？

Question

我希望能够使用 d3 库重现这个图例，目前我有自己的算法可以为我执行此操作，但我不知道 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,4或5）的数量，输出是图像的输出，考虑到例如3是最小值、最大值和之间的值最小值和最大值，实际上它们不是 3 个分位数，而是 2，这个过程对于 4 或 5 来说是相同的，这些颜色将在 colorbase 范围内： rgb(231, 25, 32)颜色限制：rgb(245, 163, 166)

Answer 1

我宁愿创建这样的线性颜色比例：

var data =  [ 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 ]
var minValue = d3.min(data)
var maxValue = d3.max(data)
var minColor = "rgb(231, 25, 32)"
var maxColor = "rgb(245, 163, 166)"
const colorScale = d3
    .scaleLinear()
    .domain([maxValue,minValue])
    .range([maxColor,minColor])
// then use this color scale to get colors for your legend
console.log(colorScale(data[5])) // output: "rgb(233, 49, 55)"