使用HSL或RGB制作动态渐变

Question

我有一个用d3构建的标准50状态映射，其中我根据各种数据集动态着色状态。无论数据集是什么，值都按0到1的标度进行归一化，其中1对应于具有最高值的状态。我正在寻找一种使用标准化数据点的值来计算状态阴影的方法。

在过去，我选择了我喜欢的基色 - 比如＃900 - 并将每个州的fill设置为该颜色，将opacity设置为标准化值。除了两个问题外，这样做还可以：

• 当画布具有背景颜色时，需要在每个阴影状态下绘制一个空白状态;和
• 以这种方式淡出颜色可能看起来很糊涂

但我真的希望能够动态设置颜色，而不是处理数据的分档和渐变的RGB值的预设数组。所以我想知道是否有更好的方法。如果替代颜色系统可以更好地工作，我可以处理转换。

d3有一个烤好的HSL转换器，所以我尝试了这个：

// 0 <= val <= 1 
function colorize(val) {
    // nudge in the extremes
    val = 0.2 + 0.6 * val;
    return d3.hsl(0, val, 1 - val);
}

它运作正常 - 这是一个在缅因州和俄勒冈州最常见的捕鱼工作地图 - 但我怀疑有更好的方法。想法？

Answer 1

我喜欢你所做的事情，但如果你想做一些不同的事情，你总是可以做D3规模。例如：

 var scale =  d3.scale.linear().domain([rangeMin, rangeMid,
 rangeMax]).range(["#Color1","#Color2","#Color3"]);

然后按

设置每个州

return scale(dataValue);

您可以将rangeMin和rangeMax变量设置为数据的最小值和最大值。我添加的中位数rangeMid是可选的。如果您想要各种颜色，我建议使用它。我已经使用这个缩放功能来制作一个非常好的单词频率热图。我希望我能以某种方式提供帮助！

注意：我使用了css十六进制值，但我相信RGB和HSL也可以工作。