从 d3 比例和颜色插值返回 RGB 对象而不是字符串答案

【问题标题】：Return RGB object instead of string from d3 scale and color interpolation从 d3 比例和颜色插值返回 RGB 对象而不是字符串
【发布时间】：2019-05-13 12:07:22
【问题描述】：

我正在使用d3-scale 和d3-scale-chromatic 来生成色标。它运行良好，但结果是一个 css 字符串，如 "rgb(100, 122, 222)"。

因为我在 WebGL 上下文中工作，所以不需要获取 css 字符串，我直接使用 rgb 值。这太糟糕了，因为我需要将此字符串转换回一个对象，并且我看到 D3 interpolate module 在将其转换为字符串之前已经像我需要的那样计算了一个 rgb 对象。

我想知道是否可以绕过此转换并直接从 D3 获取对象？

【问题讨论】：

标签： javascript css d3.js

【解决方案1】：

使用d3.color，其中：

解析指定的 CSS 颜色模块级别 3 说明符字符串，返回 RGB 或 HSL 颜色。

例如，假设你有这个字符串：

const colorString = d3.interpolateSpectral(0.5);
console.log(colorString)

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

通过将其传递给d3.color，您可以获得r、g、b 和opacity 属性：

const colorString = d3.interpolateSpectral(0.5);
const colorObject = d3.color(colorString);
console.log(colorObject)

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

【讨论】：

感谢您的回答。事实上，这与解析 rgb 字符串无关，更多的是关于性能，因为 d3 首先（内部）生成 rgb 对象，然后将其转换为字符串。因为我需要 rgb 对象，所以我在问是否可以有一个自定义插值器来直接返回 rgb 对象
是的，你可以有一个自定义的插值器，只需更改源代码即可生成你想要的对象。