Skala kolorów d3 - liniowa z wieloma kolorami?

Question

Próbuję stworzyć coś trochę przypominającego skalę kwantyzacji, ale zachowuję się jak liniowa skala kolorów?

Kiedy próbuję umieścić wiele kolorów w skali liniowej, wydaje się, że skaluje się tylko między dwoma pierwszymi kolorami.

Chciałbym wielu kolorów, takich jak skala kwantyzacji, ale znikną między tymi kolorami. Nie jestem pewien, czy to możliwe.

//red and green works ok 
var color = d3.scale.linear() 
      .range(['red','green']); 

//doesn't work - only red and green show 
var color = d3.scale.linear() 
      .range(['red','green', 'blue']); 


//red green and blue show, however it doesn't fade between the colors 
var color = d3.scale.quantize() 
      .range(['red','green', 'blue']); 

Answer 1

Musisz użyć domenę wartość 'pivot' jak:

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

Z documentation for continuous scale domains:

Chociaż ciągłe Wagi mają zazwyczaj dwie wartości, każdy w swojej dziedzinie i zasięgu, określając więcej niż dwie wartości daje podziałkę. Na przykład, aby utworzyć rozbieżny skalę kolorów, która interpoluje między biały i czerwony dla wartości ujemnych, a biały i zielony dla wartości dodatnich, powiedzieć:

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)"