D3:优化序数比例以返回颜色组
D3: refining ordinal scale to return groups of colours?
我在D3中设置了一个序数刻度.js如下所示,到目前为止效果很好:
var color = d3.scale.ordinal().range([ 'blue', 'red', 'green' ]);
color.domain();
console.log(color(0)); // returns 'blue'
但是,我真正想做的是能够将两个数字传递到刻度中,并让它返回蓝色、红色或绿色的特定子阴影 - 主要阴影取决于第一个数字,子阴影取决于第二个数字。
也许我可以以某种方式将 d3.scale.ordinal() 与 d3.interpolateRgb() 结合起来?我不确定插值Rgb是否是正确的选择,因为颜色是否一致很重要,具体取决于输入数字。
所以这就是我想要实现的目标:
color(0, 256); // return a shade of blue
color(0, 257); // return a second shade of blue
color(0, 256); // return the first shade of blue again
在D3中实现这一目标的任何想法?谢谢你的帮助。
你可以考虑这样的事情:
var colorgroup = d3.scale.ordinal()
.domain(d3.range(3))
.range([ 'blue', 'red', 'green' ]);
var brightrange = d3.scale.linear()
.domain([0,300])
.range([0,3]);
function color(group,shift) {
if (shift >= 0) {return d3.hsl(colorgroup(group)).darker(brightrange(shift));}
else {return d3.hsl(colorgroup(group)).brighter(brightrange(-shift));}
}
例子:
console.log(color(0,255)); //dark blue
console.log(color(0,0)); //med blue
console.log(color(0,-150)); //light blue
相关文章:
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 节点导出返回一个空对象
- ES6构造函数返回基类的实例
- 监视函数从服务返回不起作用,但作用域函数起作用
- 控制台返回var不是't定义,但它是
- 从函数返回角度承诺
- 如何使HTML5颜色选择器返回颜色名称而不是颜色代码
- 清除值时,将输入背景颜色返回到原始状态
- 为什么函数在画布中返回错误的颜色
- D3:优化序数比例以返回颜色组
- $.height 在颜色框中返回 0
- 如何从输入类型=颜色返回颜色
- 编写一个查找值并返回颜色的循环
- 使用tab键更改焦点颜色的按钮,并在按enter键时返回原始颜色
- 如何从颜色盒获得返回值
- 十六进制颜色码的按位补码总是返回6个字符吗?
- 如何从外部url获取图像数据并返回颜色
- javascript getImageData未从png图像返回正确的像素颜色
- 使用指令范围的D3颜色选择器总是返回第一种颜色
- 使用函数返回描边的一系列颜色