Javascript 颜色渐变均匀 split ,从蓝色到灰色再到红色

标签 javascript d3.js colors interpolation gradient

使用 javascript/D3,我试图将颜色映射到从红色到灰色再到蓝色的颜色渐变,如下所示。 enter image description here

这摘自 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)
}

enter image description here

非常感谢任何帮助,谢谢!

最佳答案

你可能想看看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 值替换颜色关键字。

关于Javascript 颜色渐变均匀 split ,从蓝色到灰色再到红色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37649016/

相关文章:

javascript - 使用 D3 访问嵌套的 JSON 数据

javascript - d3.js - 按两个系列之一的值对两个系列进行排序

java - 在 JTextPane 中为文本着色的有效方法

java - 颜色逻辑算法

c++ - FreeImage: 获取像素颜色

javascript - ng-view 的背景被重叠

javascript - 什么 Javascript 框架最适合这种情况?

javascript - 如果在不同的子元素上移动,MouseEvent.offsetX/Y 将重置为 0

javascript - C3 js 分组条形图排序和修复 y 轴问题

javascript - 使用 JS 将 HTML 中检测到的链接替换为其他链接