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

从连续扩展域的文档:

虽然连续标度通常在其域和范围中各有两个值,但指定两个以上的值会产生分段标度.例如,要创建一个发散的色阶,在白色和红色之间插入负值,白色和绿色插入正值,请说:

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