Javascript颜色渐变甚至分裂,蓝色到灰色到红色

2019年7月21日 360次阅读

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

《Javascript颜色渐变甚至分裂,蓝色到灰色到红色》

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

最佳答案 您可能需要查看
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值替换颜色关键字.

点赞