D3：细化顺序尺度以返回颜色组？ [英] D3: refining ordinal scale to return groups of colours?

问题描述

我已在 D3.js 中设置了序数标尺，如下所示，到目前为止它工作得很好：

I have set up an ordinal scale in D3.js as follows, and it works well so far:

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

然而，我真正想做的是能够通过两个数字进入标尺，并返回一个特定的蓝色，红色或绿色子阴影 - 主阴影取决于第一个数字，子阴影取决于第二个数字。

However, what I'd really like to do is be able to pass two numbers into the scale, and have it return a particular sub-shade of blue, red or green - the primary shade depending on the first number, the sub-shade depending on the second number.

也许我可以将 d3.scale.ordinal（）与 d3.interpolateRgb（） 以某种方式做到这一点？我不知道如果interpolateRgb是正确的选择，虽然，因为事实，颜色是一致的，这取决于输入的数字。

Perhaps I can combine d3.scale.ordinal() with d3.interpolateRgb() in some way to do this? I'm not sure if interpolateRgb is the right choice though, because matters that the colours are consistent, depending on the input numbers.

这是我想要达到的：

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

Any ideas for achieving this in D3? Thank you for your help.

推荐答案

您可以考虑这样：

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

b $ b

示例：

examples:

console.log(color(0,255)); //dark blue
console.log(color(0,0)); //med blue
console.log(color(0,-150)); //light blue

这篇关于D3：细化顺序尺度以返回颜色组？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！