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

Question

我正在尝试为 d3.js 热图目的生成 "successive" 颜色列表。所以，我正在寻找一个函数，它接受输入的起始颜色（比如十六进制的红色）、结束颜色（比如十六进制的蓝色）和一个整数（在其间生成的十六进制颜色的数量返回为列表的一种形式。

build_colors(start_color,end_color,nb_colors) -> list of colors

我不寻找太复杂的东西（比如在黎曼知觉 space 的两个颜色端点之间的测地线上以恒定速度采样）！

这可能相当容易，但我是 javascript / d3.js 以及基本上所有网络技术的初学者。

Answer 1

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

如果你真的需要一个数组而不是一个函数，你可以这样做：

var colors=[];
var nColors=20;
for (var i=0; i<nColors; i++)
  colors.push(f(i/(nColors-1)));

Answer 2

检查这个问题： Javascript color gradient

RainbowVis-JS 完全符合您的要求： https://github.com/anomal/RainbowVis-JS

Answer 3

出于计算目的，我认为将颜色表示为 0 到 255 之间的三个整数更容易。CSS 颜色属性然后可以分配格式为 "rgb(64, 32, 16)".[=13= 的值]

因此，对于您的 build_color(…) 函数，我认为最好的办法是接受 return 颜色作为三个整数的数组。

这是一个例子：

var build_colors = function(start, end, n) {
    
    //Distance between each color
    var steps = [
      (end[0] - start[0]) / n,  
      (end[1] - start[1]) / n,  
      (end[2] - start[2]) / n  
    ];
    
    //Build array of colors
    var colors = [start];
    for(var ii = 0; ii < n - 1; ++ii) {
      colors.push([
        Math.floor(colors[ii][0] + steps[0]),
        Math.floor(colors[ii][1] + steps[1]),
        Math.floor(colors[ii][2] + steps[2])
      ]);
    }
    colors.push(end); 
   
    return colors;
  };
  


  //Example: ten colors between red and blue
  var colors = build_colors([255, 0, 0], [0, 0, 255], 10);  
  
  //Render
  for(var ii = 0; ii < 10; ++ii) {
    var div = document.createElement("div");
    div.setAttribute("style", "background: rgb(" + colors[ii].join(",") + ")");
    document.body.appendChild(div);    
  }

div {
  width: 100px;
  height: 25px;
}

<body>
</body>

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

how to generate a list of successive colors in javascript

javascript

visualization

data-visualization

colors

d3.js