Javascript Farbverlauf sogar geteilt, blau bis grau zu rot

Question

Mit Javascript/D3, ich versuche, Farben auf einen Farbverlauf von rot nach grau bis blau abzubilden, wie unten dargestellt.

Dies ist aus dem Algo Vis Papier Algo Vis Folie 13 genommen. Allerdings habe ich Schwierigkeiten bei der Herstellung dieses Gradienten. Ich habe versucht, zwei Farbverläufe von blau nach grau und grau zu rot, wie folgt, aber mein Ergebnis ist aus.

botRgb = d3.rgb(0,0,210); 
topRgb = d3.rgb(210,0,0); 
midRgb = d3.rgb(230,230,230); 
gradient1 = d3.interpolateRgb(botRgb,midRgb); 
gradient2 = d3.interpolateRgb(midRgb,topRgb); 
// assume x is from 0 to 1 
if (x < 0.5){ 
    return gradient1(x) 
} else { 
    return gradient2(x) 
} 

Jede Hilfe wäre sehr dankbar, danke!

Answer 1

Sie möchten vielleicht d3.scale betrachten. Insbesondere ermöglicht die Funktion continuous domain, dass Sie eine Domäne erstellen können - in Ihrem Fall haben Sie angegeben, dass Ihr x von 0 bis 1 ist - und dieser Domäne im Bereich Äquivalente zuweisen.

Etwas wie:

var color = d3.scaleLinear() 
    .domain([0, 0.5, 1.0]) 
    .range(["blue", "white", "red"]); 

// use with color(x) where x is from 0 to 1; 

Vielleicht die Farb Keywords mit RGB-Werte zu ersetzen.