2

我正在使用 D3.js创建一个不同的规模：

scaleDiverging = d3.scaleDivergingSymlog(d3.interpolateBrBG)
    .domain([-0.1, 0, 0.1])

然后我可以打电话scaleDiverging(0.05)，我会得到'rgb(87, 175, 165)'. 这很好用，只是我需要canvas用 RGB 整数填充图像。所以我必须解析从返回的那些字符串scaleDiverging：

const parseRgb = color =>
    color.substring(4, color.length - 1).split(', ')
        .map(n => parseInt(n))

简单的解决方案，但这是我的应用程序花费大部分时间的问题部分，也是我的交互式图形不流畅的原因。您移动一个滑块，2 秒后图像发生变化。如果我parseRgb用一个不准确地返回数字数组的简单函数替换，则图形是平滑的！我需要 CanvasputImageData函数的 RGB 值数组：

const context = canvas.node().getContext('2d'),
    imageData = context.getImageData(0, 0, width, height),
    data = imageData.data
for (int i = 0; i < width * height * 4; i += 4) {
    const color = parseRgb(scaleDiverging(calcVal(i)))
    data[i] = color[0]
    data[i + 1] = color[1]
    data[i + 2] = color[2]
    data[i + 3] = 255
}
context.putImageData(imageData, 0, 0)

我可以scaleDivergingSymlog从不需要解析结果字符串的 D3.js 获得功能吗？我知道我可以自己查找代码并实现它，但是，除了避免这项工作之外，我还想知道将来如何正确使用 D3.js 来制作交互式图表。

stackoverflow 上的其他人也有类似的问题，唯一的答案是使用d3.color. 这与我上面的功能基本相同parseRgb，但性能更差:(。

4

0 回答 0