尽管范围是十六进制值，但 D3 scaleLinear() 返回 rgb 值答案

【问题标题】：D3 scaleLinear() returns rgb value although the range is in hex values尽管范围是十六进制值，但 D3 scaleLinear() 返回 rgb 值
【发布时间】：2020-05-10 12:57:52
【问题描述】：

d3.scaleLinear() 返回一个 rgb 字符串值，尽管范围是用十六进制值映射的。我的用法有什么不对吗？

const value = 0;
col = d3.scaleLinear().domain([0, 16000]).range(["#ffdc00","#ffa900"]);
console.log(col(value));
//returns rgb(255, 220, 0)

【问题讨论】：

这是预期的行为，您使用正确，除非您使用自定义插值器，否则比例不会返回十六进制值。虽然您可以使用 d3.color 从刻度返回的值中创建一个十六进制值。

标签： javascript d3.js

【解决方案1】：

d3-scale 依赖于d3-interpolate，它在检测到颜色时默认使用d3.interpolateRgb (source)：

如果 b 是颜色或可强制转换为颜色的字符串，请使用 interpolateRgb。

如d3.interpolateRgb 的文档中所述：

插值器的返回值是一个RGB字符串。

因此行为是正常的，并且提供的代码示例非常好。

RGB 字符串等价于其十六进制表示，因此可以直接使用。

如果用例需要十六进制字符串，可以使用d3-color中的函数color.formatHex，如下面的sn-p所示：

const value = 0;
col = d3.scaleLinear().domain([0, 16000]).range(["#ffdc00","#ffa900"]);

let rgbValue = col(value)

console.log('rgb string:', rgbValue);

console.log('hex string:', d3.color(rgbValue).formatHex());

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js"&gt;&lt;/script&gt;

【讨论】：