Javascript 颜色渐变均分，蓝到灰到红

Question

使用 javascript / D3，我正在尝试将颜色映射到颜色渐变运行，从红色到灰色再到蓝色，如下所示。

本文摘自 Algo Vis 论文 Algo Vis 幻灯片 13。但是，我在生成此渐变时遇到了问题。我试过了创建从蓝色到灰色和灰色到红色的两个渐变，如下所示，但我的结果是关闭的。

botRgb = d3.rgb(0,0,210);
topRgb = d3.rgb(210,0,0);
midRgb = d3.rgb(230,230,230);
gradient1 = d3.interpolateRgb(botRgb,midRgb);
gradient2 = d3.interpolateRgb(midRgb,topRgb);
// assume x is from 0 to 1
if (x < 0.5){
  return gradient1(x)
} else {
  return gradient2(x)
}

任何帮助将不胜感激，谢谢！

Answer 1

您可能需要查看 d3.scale. In particular, the continuous domain 功能，该功能允许创建一个域——在您的例子中，您说 x 是从 0 到 1——并在该范围内为该域分配等价物。

类似于：

var color = d3.scaleLinear()
    .domain([0, 0.5, 1.0])
    .range(["blue", "white", "red"]);

// use with color(x) where x is from 0 to 1;

也许用 rgb 值替换颜色关键字。

Javascript 颜色渐变均分，蓝到灰到红

Javascript color gradient even split, blue to grey to red

javascript

interpolation

gradient

colors

d3.js