D3：精炼序数比例以返回颜色组？答案

【问题标题】：D3: refining ordinal scale to return groups of colours?D3：精炼序数比例以返回颜色组？
【发布时间】：2012-04-30 21:41:38
【问题描述】：

我在D3.js中设置了一个序数比例如下，到目前为止效果很好：

var color = d3.scale.ordinal().range([ 'blue', 'red', 'green' ]); 
color.domain();  
console.log(color(0)); // returns 'blue'

但是，我真正想做的是能够将两个数字传递到刻度中，并让它返回蓝色、红色或绿色的特定子阴影 - 主要阴影取决于第一个数字，子阴影取决于第二个数字。

也许我可以以某种方式将d3.scale.ordinal() 与d3.interpolateRgb() 结合起来执行此操作？我不确定 interpolateRgb 是否是正确的选择，因为颜色是否一致很重要，具体取决于输入数字。

这就是我想要实现的目标：

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 中实现这一点吗？感谢您的帮助。

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

你可以考虑这样的事情：

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

【讨论】：