D3 цветовая гамма - линейная с несколькими цветами?

Я пытаюсь создать нечто вроде квантованного масштаба, но действую как линейная цветовая шкала?

Когда я пытаюсь поместить несколько цветов в линейный масштаб, он, кажется, масштабируется только между двумя первыми цветами.

Я бы хотел несколько цветов, например, квантовать масштаб, но исчезать между этими цветами. Я не уверен, что это возможно.

//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']);

Ответы

Ответ 1

Вы должны использовать значение "pivot" для домена, например:

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

В документации для доменов с непрерывным масштабированием:

Хотя непрерывные масштабы обычно имеют по два значения в каждом домене и диапазоне, задавая более двух значений, получается кусочный масштаб. Например, для создания расходящейся цветовой шкалы, которая интерполирует между белым и красным для отрицательных значений, а белый и зеленый для положительных значений, скажем:

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