返回RGB对象而不是从D3刻度和颜色插值中返回字符串

Question

我正在使用 d3-scale和 d3-scale-chromatic来生成颜色比例。它运行良好，但结果是"rgb(100, 122, 222)"等CSS字符串。

由于我在WebGL上下文中工作，因此我不需要获得CSS字符串，所以我直接使用RGB值。太糟糕了，因为我需要将此字符串转换回一个对象，并且我看到D3插值模块已经在将其施放到字符串中之前已经计算出RGB对象。

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

Answer 1

使用 d3.color，

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

例如，假设您有此字符串：

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>