D3. js проблема производительности, может ли scaleDivergingSymlog возвращать значения RGB вместо строки? - PullRequest
Новая
       39

D3. js проблема производительности, может ли scaleDivergingSymlog возвращать значения RGB вместо строки?

2 голосов
/ 20 февраля 2020

Я создаю расходящуюся шкалу , используя 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))

Простое решение, но это проблемная часть c, где мое приложение тратит большую часть своего времени и является причиной, по которой мой интерактивный график не гладко Вы перемещаете ползунок и через 2 секунды изображение меняется. Если я заменю parseRgb простой функцией, которая неточно возвращает массив чисел, график будет гладким! Мне нужен массив значений RGB для функции Canvas 'putImageData: 

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 функция выше, но производительность еще хуже: (.

...