Вопрос по javascript – D3: уточнение порядковой шкалы для возврата групп цветов?

5

Я установил порядковый масштаб вD3.js следующим образом, и это хорошо работает до сих пор:

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

Однако то, что я действительно хотел бы сделать, это быть в состоянии пройтиtwo числа в шкале, и они возвращают определенный оттенок синего, красного или зеленого цвета - основной оттенок в зависимости от первого числа, дополнительный оттенок в зависимости от второго числа.

Возможно, я могу совместить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? Спасибо за помощь.

Ваш Ответ

1   ответ
12

Вы могли бы рассмотреть что-то вроде этого:

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
Превосходно, большое спасибо. Richard

Похожие вопросы