d3.js - d3 color scale - linear with multiple colors? -

i'm trying create little quantize scale, act linear color scale?

when try put multiple colors linear scale, seems scale between first 2 colors.

i'd multiple colors quantize scale, fade between colors. i'm unsure if possible.

//red , green works ok var color = d3.scale.linear()             .range(['red','green']);  //doesn't work - red , green show var color = d3.scale.linear()             .range(['red','green', 'blue']);   //red green , blue show, doesn't fade between colors var color = d3.scale.quantize()             .range(['red','green', 'blue']); 

you have use domain 'pivot' value like:

d3.scale.linear()     .domain([0, pivot, max])     .range(['red', 'green', 'blue']); 

from documentation continuous scale domains:

although continuous scales typically have 2 values each in domain , range, specifying more 2 values produces piecewise scale. example, create diverging color scale interpolates between white , red negative values, , white , green positive values, say:

var color = d3.scalelinear()     .domain([-1, 0, 1])     .range(["red", "white", "green"]);  color(-0.5); // "rgb(255, 128, 128)" color(+0.5); // "rgb(128, 192, 128)"