colors - d3色标-与多种颜色成线性关系吗？

Question

我正在尝试创建一些类似于量化标尺的东西，但是表现得像线性色标一样？

当我尝试将多种颜色按线性比例缩放时，似乎只能在前两种颜色之间缩放。

我想要多种颜色，例如量化标度，但是会在这些颜色之间逐渐消失。我不确定这是否可能。

//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

您必须使用域“pivot”值，例如:

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

从 documentation for continuous scale domains:

Although continuous scales typically have two values each in their domain and range, specifying more than two values produces a piecewise scale. For example, to create a diverging color scale that interpolates between white and red for negative values, and white and green for 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)"