Question

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

ks_channel

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

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

Answer 1

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)));

Answer 2

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

因此，对于你的build_color（...）函数，我认为最好是接受并返回三个整数的数组。

以下是一个例子：

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>

Answer 3

检查此问题： Javascript color gradient

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

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

3 个答案: