javascript - Javascript颜色渐变均匀，从蓝色到灰色到红色

我正在使用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)
}

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

最佳答案

您可能要看看d3.scale。特别地，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值替换color关键字。