D3: raffinando la scala ordinale per restituire gruppi di colori?

Question

Ho creato una scala ordinale in D3.js come segue, e funziona bene finora:

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

Tuttavia, quello che mi piacerebbe veramente fare è essere in grado di passare due numeri in scala , e farlo restituire una sotto-ombra particolare di blu, rosso o verde - la tonalità primaria a seconda del primo numero, la sotto-ombra a seconda del secondo numero.

Forse posso combinare d3.scale.ordinal() con d3.interpolateRgb() in qualche modo per fare questo? Non sono sicuro che interpolateRgb sia la scelta giusta, perché è importante che i colori siano coerenti, a seconda dei numeri di input.

Quindi questo è quello che vorrei realizzare:

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 

Tutte le idee per il raggiungimento di questo in D3? Grazie per l'aiuto.

Answer 1

si potrebbe considerare qualcosa di simile:

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

esempi:

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