d3线性色标输出错误

Question

I have the following function:

function getColor(value){
    //value from 0 to 1
    var color = d3.scale.linear()
    .domain([0, 1])
    .range(colorbrewer.Greys[9]);

    console.log(value + " = > " + color(value));

    return color(value);
}

This uses the colorbrewer.js from D3.

However, the values returned are off.

For example I get:

1 = > #f0f0f0 and 0 = > #ffffff which happen to be the first and second in the scale:

["#ffffff","#f0f0f0","#d9d9d9","#bdbdbd","#969696","#737373","#525252","#252525","#000000"]

How can I make it interpolate so that it calculates the right color based on a value between 0 and 1? I also tried the ordinal scale, but that didn't help much either.

Answer 1

What you really want to do is use quantize scales

Quantize scales are a variant of linear scales with a discrete rather than continuous range. The input domain is still continuous, and divided into uniform segments based on the number of values in (the cardinality of) the output range.

Consider this plunker :

where the key is:

function getColor(value){
    //value from 0 to 1
    var color = d3.scale.quantize()
    .domain([0, 1])
    .range(colorbrewer.Greys[9]);

    console.log(value + " = > " + color(value));

    return color(value);
}

Answer 2

Quoting the documentation :

The array must contain two or more values, to match the cardinality of the input domain, otherwise the longer of the two is truncated to match the other.

So you could either take just the first and last value of the colorbrewer array, or give more values for the input domain that correspond to the respective output.