JavaScript，一种在绘图中将 float 表示为颜色的好方法

Question

我正在尝试使用 JavaScript (D3.js) 创建一个绘图，并且每一秒我都有新的带有标签的输入点，这个标签是从给定间隔中随机选择的 float 。

我需要用一种给定的颜色来表示这个标签( float )，这样我就可以得到具有渐变颜色的点，类似于:

到目前为止我已经尝试过了，但没有给出预期的结果。

function float2color( label ) {
        var r = 255 - ( label / 8 * 255 | 0 ); 
            g = label / 8 * 255 | 0;  

        return '#' + 
            ( r ? ( r = r.toString(16), r.length == 2 ? r : '0' + r ) : '00' ) +
            ( g ? ( g = g.toString(16), g.length == 2 ? g : '0' + g ) : '00' ) + '00'
    }

结果(不好))

Answer 1

听起来您想要的是线性色标。这将替换您的 float2color 函数。

var color = d3.scale.linear()
    .domain([min, max])
    .range(['blue', 'yellow']);

然后实际从 float 中获取颜色，

color(float_value);

请注意，'blue' 和 'yellow' 也可以作为十六进制表示形式给出。参见 https://github.com/mbostock/d3/wiki/Quantitative-Scales#linear-scales