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

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

- Kevin Zen

Answer 1

你可能想要查看d3.scale。特别是，连续域功能允许创建一个域——在你的情况下，你说你的x值从0到1——并将该域中的等价物分配到范围内。

例如：

```text d3.scaleLinear() .domain([0, 1]) .range([0, width]); ```

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 值来替代颜色关键字。

- Jake Shasteen