Интерполяция цветов в D3.js основана на построении непрерывных функций перехода между двумя значениями цвета. В зависимости от выбранного цветового пространства результат может радикально отличаться: от физически корректных плавных переходов до математически линейных, но визуально искажённых градиентов.
Базовый механизм реализован в пакете d3-interpolate, где
цвет рассматривается как структура, поддающаяся разложению на компоненты
и последующему поэлементному интерполированию.
Любая функция интерполяции в D3 имеет форму:
const i = d3.interpolate(a, b);
i(t); // t ∈ [0, 1]где:
a — начальное значениеb — конечное значениеt — параметр прогрессаДля цветов a и b D3 автоматически выбирает
стратегию интерполяции либо по RGB, либо по специализированному
цветовому пространству, если оно явно задано.
RGB — наиболее прямолинейная модель, основанная на смешении каналов красного, зелёного и синего.
Используется:
d3.interpolateRgb("rgb(255, 0, 0)", "rgb(0, 0, 255)")или сокращённо:
d3.interpolate("red", "blue")Проблема RGB заключается в том, что человеческое зрение не воспринимает изменения каналов линейно. Переход через середину часто выглядит «грязным» или затемнённым.
HSL (Hue, Saturation, Lightness) вводит разделение на оттенок, насыщенность и светлоту.
Использование:
d3.interpolateHsl("red", "blue")HCL (Hue, Chroma, Luminance) ориентирована на восприятие человеком яркости и цвета.
Использование:
d3.interpolateHcl("red", "blue")HCL обеспечивает более равномерные визуальные переходы по яркости, чем HSL и RGB.
LAB (CIELAB) построен на модели восприятия цвета человеком и является одной из наиболее точных перцептуальных моделей.
Использование:
d3.interpolateLab("red", "blue")Интерполяция происходит в пространстве, близком к равномерному восприятию различий цвета.
Cubehelix разработан для сохранения монотонной яркости при изменении оттенка.
Использование:
d3.interpolateCubehelix("purple", "yellow")При использовании универсального интерполятора:
d3.interpolate(a, b)D3 определяет тип значений:
Для цветов по умолчанию может использоваться RGB-подобная модель, если явно не задан альтернативный интерполятор.
Для полного контроля используется выбор конкретной функции:
const iRgb = d3.interpolateRgb(a, b);
const iHsl = d3.interpolateHsl(a, b);
const iHcl = d3.interpolateHcl(a, b);
const iLab = d3.interpolateLab(a, b);Каждая функция возвращает интерполятор с фиксированной моделью вычисления.
D3 поддерживает CSS-цвета:
d3.interpolateLab("steelblue", "#ffcc00")Внутри происходит преобразование в объект d3-color,
который нормализует значение перед интерполяцией.
Поддерживаемые форматы:
RGB-пространство не учитывает нелинейность восприятия яркости. В результате линейная интерполяция в RGB:
LAB и HCL частично компенсируют это за счёт перцептуально равномерных компонент.
Цветовые шкалы в D3 часто строятся через
d3.scaleSequential:
const scale = d3.scaleSequential(d3.interpolateLab)
.domain([0, 100]);Поведение шкалы напрямую зависит от выбранного пространства интерполяции.
При построении визуализаций данных цветовая интерполяция влияет на:
RGB используется редко в аналитических задачах из-за искажений восприятия.
Цветовые интерполяторы D3 могут учитывать альфа-канал:
d3.interpolateRgb("rgba(255,0,0,0.2)", "rgba(0,0,255,1)")Альфа интерполируется линейно независимо от цветового пространства.
При интерполяции сложных структур цвет является лишь одним из компонентов:
d3.interpolate({
color: "red",
value: 10
}, {
color: "blue",
value: 20
})color интерполируется через выбранное цветовое
пространствоРазличия в вычислительной сложности:
В высокочастотных анимациях предпочтение часто отдаётся RGB или упрощённым моделям.
Хотя стандартный диапазон:
t ∈ [0, 1]D3 допускает экстраполяцию:
t < 0 → продолжение назадt > 1 → продолжение вперёдЦветовые интерполяторы продолжают вычисления в выбранном пространстве без ограничения значений, что может приводить к нестандартным оттенкам.