如何在javascript中生成连续颜色列表

如何在javascript中生成连续颜色列表,javascript,d3.js,colors,visualization,data-visualization,Javascript,D3.js,Colors,Visualization,Data Visualization,我试图为d3.js热图生成一个“连续”颜色列表。 因此,我正在寻找一个函数,它接受输入一个起始颜色(十六进制表示为红色)、一个结束颜色(十六进制表示为蓝色)和一个整数(作为列表形式返回的要在这两者之间生成的十六进制颜色数) build_colors(start_color,end_color,nb_colors) -> list of colors 我不寻找太复杂的东西(比如在黎曼感知空间的两个颜色端点之间的测地线上以恒定速度采样) 这可能很简单,但我对javascript/d3.js和

我试图为d3.js热图生成一个“连续”颜色列表。 因此,我正在寻找一个函数,它接受输入一个起始颜色(十六进制表示为红色)、一个结束颜色(十六进制表示为蓝色)和一个整数(作为列表形式返回的要在这两者之间生成的十六进制颜色数)

build_colors(start_color,end_color,nb_colors) -> list of colors
我不寻找太复杂的东西(比如在黎曼感知空间的两个颜色端点之间的测地线上以恒定速度采样)


这可能很简单,但我对javascript/d3.js和基本上所有web技术都是初学者。

d3有一个内置的颜色插值器,实际上有几个。最接近的可能是
f=d3.interpolateHsl(a,b)
其中
a
b
是两种颜色。它返回一个插值函数
f
,取一个介于0和1之间的参数,并返回a到b范围内的相应颜色

如果确实需要数组而不是函数,可以执行以下操作:

var colors=[];
var nColors=20;
for (var i=0; i<nColors; i++)
  colors.push(f(i/(nColors-1)));
var colors=[];
var-nColors=20;
对于(var i=0;i检查此问题:

RainbowVis JS正是您想要的:

出于计算目的,我认为更容易将颜色表示为三个从0到255的整数。然后可以使用格式为“rgb(64,32,16)”的值为CSS颜色属性赋值

因此,对于build_color(…)函数,我认为最好是接受并返回三个整数数组的颜色

下面是一个例子:

var build\u colors=函数(开始、结束、n){
//每种颜色之间的距离
变量步骤=[
(结束[0]-开始[0])/n,
(结束[1]-开始[1])/n,
(结束[2]-开始[2])/n
];
//构建颜色数组
var colors=[start];
对于(var ii=0;ii
div{
宽度:100px;
高度:25px;
}

对于d3.js用户来说,@laurent答案的可能副本要好得多。这完全是普通的Javascript。