Javascript 在两种颜色之间创建颜色比例

我想用在两种颜色之间创建一个x颜色的调色板来代替这个实现？ 例如，我想将0到31之间的90个数字映射为黄色和红色之间的9种颜色。这可能吗？

---

我使用的是v3，您可以使用自定义插值器创建连续比例，或者使用自定义颜色数组创建阈值比例

但是，由于您希望方便地使用任意两种颜色作为起始颜色和结束颜色，我认为最简单的解决方案是使用两个刻度

第一个值仅将

0

到

31

的所有数字映射到9个值：

let colors = ["#5D2EE8", "#2F9EEE", "#2FC8EE", "#2DD91A", "#CBF22C",
              "#F2CE2C", "#F06E1D", "#E61717", "#3C2EA8", "#7A2EA1"];
let colorRange = d3.scale.quantile()
                   .domain([0, 31])
                   .range(colors);

然后，另一个比例将这9个值映射到任意两种给定颜色之间的9种颜色。在您的情况下，

“黄色”

和

“红色”

：

我在这里使用v4，您只需将它们更改为

d3.scale.quantize（）

和

d3.scale.linear（）

这是一个演示（也使用v4），我创建了150个div，每个div代表一个介于

0

和

31

之间的数字。输出只有9种颜色：

var scale=d3.scaleQuantize（）
.射程（d3.射程（9））
.域（[0,31]）；
var colorScale=d3.scaleLinear（）
.范围（[“黄色”、“红色”]）
.域（[0,9]）；
var divs=d3。选择（“主体”）。选择全部（空）
.数据（d3.范围（0,31.2,0.2））
.输入（）
.附加（“div”）
.样式（“背景色”，功能（d）{
返回色标（色标（d））
});
div{
保证金：2倍；
宽度：15px；
高度：15px；
显示：内联块；
边框：1px纯色灰色；
}

var scale = d3.scaleQuantize()
    .range(d3.range(9))
    .domain([0, 31]);

var colorScale = d3.scaleLinear()
    .range(["yellow", "red"])
    .domain([0, 9]);