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

Question

我正在使用d3色标和d3色标来生成色标。它运行良好，但结果是css字符串，如“ rgb（100,122,222）”。

因为我在WebGL上下文中工作，所以不需要获取CSS字符串，因为我直接使用了rgb值。太糟糕了，因为我需要将此字符串转换回一个对象，并且我看到d3插值模块已经在像将其转换为字符串（https://github.com/d3/d3-interpolate/blob/0c026b4603f594ef6863cf22fc122b62c00a8633/src/rgb.js#L49）一样计算了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>