d3色标-与多种颜色成线性关系吗? [英] d3 color scale - linear with multiple colors?

问题描述

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

I'm trying to create something a little like a quantize scale, but act like a linear color scale?

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

When I try to put multiple colors into a linear scale, it seems to only scale between the first two colors.

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

I'd like multiple colors like a quantize scale, but fade between those colors. I'm unsure if this is possible.

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

推荐答案

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

You have to use domain 'pivot' value like:

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

从有关连续规模域的文档:

尽管连续刻度通常在其范围和范围内各有两个值，但指定两个以上的值会产生分段刻度.例如，要创建一个在白色和红色之间表示负值，而在白色和绿色之间表示正值的发散色标，则说:

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

这篇关于d3色标-与多种颜色成线性关系吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！