Заливки и обводки областей

Визуализация площадей в компонентах Nivo строится на многоуровневой системе рендеринга, где ключевую роль играют заполнения (fills), правила наложения цветов, прозрачность и декоративные паттерны. В зависимости от типа графика (@nivo/area, @nivo/line с включённой заливкой, @nivo/stream, @nivo/area-bump) механика остаётся концептуально одинаковой: сначала вычисляется геометрия области, затем применяется заливка, после чего накладываются обводки и декоративные элементы.

Основная идея заключается в разделении данных и визуального оформления: данные определяют форму области, а конфигурация задаёт внешний вид каждого слоя.

Базовая заливка областей

В простейшем варианте каждая серия данных получает собственный цвет заливки через массив colors или через функцию-генератор цвета.

import { ResponsiveAreaBump } from '@nivo/bump'

<ResponsiveAreaBump
    data={data}
    colors={{ scheme: 'nivo' }}
/>

При использовании @nivo/line или @nivo/area заливка включается через комбинацию параметров:

<ResponsiveLine
    data={data}
    enableArea={true}
    areaBaselineValue={0}
    colors={{ scheme: 'category10' }}
/>

Ключевые параметры:

  • enableArea — включает отрисовку заливки под линией
  • areaBaselineValue — задаёт базовую линию (например, 0)
  • colors — определяет цветовые серии

При этом каждая серия данных превращается в замкнутый SVG-полигон, который заполняется указанным цветом.

Прозрачность и управление визуальной плотностью

Прозрачность является ключевым инструментом при работе с перекрывающимися областями. В Nivo она регулируется через areaOpacity.

<ResponsiveArea
    data={data}
    areaOpacity={0.6}
/>

Значение влияет на:

  • визуальное смешивание перекрывающихся областей
  • читаемость нижних слоёв
  • восприятие плотности данных

Часто используется стратегия:

  • нижние слои — более прозрачные
  • верхние слои — более насыщенные

В многоуровневых диаграммах это создаёт эффект глубины без необходимости ручной настройки каждого цвета.

Градиентные заливки

Градиенты в Nivo реализуются через систему defs, которая описывает SVG-определения, и связываются с сериями через fill.

Определение градиентов

defs={[
    {
        id: 'gradientA',
        type: 'linearGradient',
        colors: [
            { offset: 0, color: '#4f46e5' },
            { offset: 100, color: '#22c55e' }
        ]
    }
]}

Привязка к данным

fill={[
    { match: { id: 'seriesA' }, id: 'gradientA' }
]}

Градиентные заливки применяются поверх геометрии области и заменяют стандартный однотонный цвет.

Особенности:

  • поддерживается линейная и радиальная интерполяция
  • можно комбинировать с прозрачностью
  • каждый слой может иметь уникальный градиент

Паттерны заполнения

Помимо градиентов, используется система паттернов, позволяющая создавать текстурные заливки.

Пример диагональных линий

defs={[
    {
        id: 'diagonalLines',
        type: 'patternLines',
        background: 'inherit',
        color: '#ffffff',
        rotation: -45,
        lineWidth: 2,
        spacing: 6
    }
]}

Применение паттерна

fill={[
    { match: { id: 'seriesB' }, id: 'diagonalLines' }
]}

Паттерны особенно полезны в случаях:

  • чёрно-белой печати
  • дальтонических схем
  • необходимости разделения похожих цветов

Логика сопоставления fill-моделей

Механизм fill работает как слой правил сопоставления:

fill={[
    { match: { id: 'A' }, id: 'gradientA' },
    { match: { id: 'B' }, id: 'patternB' }
]}

Типы match-условий:

  • по id серии
  • по регулярному выражению
  • по произвольному полю данных

Это позволяет строить динамическую систему оформления, где визуализация зависит от структуры данных, а не от жёсткой конфигурации.

Обводка областей

Обводка в областных графиках Nivo выполняет роль визуального разделителя между слоями. Она особенно важна при высокой плотности данных или схожих цветах заливки.

Основные параметры:

  • borderWidth — толщина линии
  • borderColor — цвет обводки
  • enableGridX / enableGridY — косвенно влияют на визуальное восприятие границ
<ResponsiveArea
    data={data}
    borderWidth={2}
    borderColor={{ from: 'color', modifiers: [['darker', 1.4]] }}
/>

Динамическая обводка

Часто используется производная от основного цвета:

borderColor={{
    from: 'color',
    modifiers: [['darker', 2]]
}}

Такой подход сохраняет визуальную связность:

  • заливка остаётся основной
  • обводка подчёркивает форму
  • не требуется ручное управление цветами

Обводка и взаимодействие с мышью

При наведении (hover) обводка может изменять интенсивность, усиливая выделение активной области.

В @nivo/line и @nivo/area это достигается через:

  • activeOpacity
  • inactiveOpacity
  • кастомные темы
theme={{
    area: {
        opacity: 0.7
    }
}}

Поведение:

  • активная серия становится более контрастной
  • неактивные приглушаются
  • обводка остаётся стабильной для ориентации

Взаимодействие заливки и слоёв

Рендеринг областей происходит по слоям:

  1. геометрия (path)
  2. заливка (color / gradient / pattern)
  3. обводка (stroke)
  4. интерактивные элементы (tooltip, points)

Порядок влияет на итоговое восприятие:

  • заливка формирует массу данных
  • обводка задаёт структуру
  • интерактивность добавляет контекст

При неправильной настройке (например, слишком яркая обводка) теряется читаемость слоёв.

Особенности перекрывающихся областей

В многосерийных графиках области могут перекрывать друг друга. Nivo не использует булевы операции над полигонами, поэтому визуальное смешивание происходит через прозрачность.

Рекомендуемые подходы:

  • уменьшение areaOpacity
  • использование контрастных границ
  • разделение цветов по спектру
  • применение паттернов вместо цвета

Производительность при сложных заливках

Градиенты и паттерны увеличивают нагрузку на SVG-рендеринг. При большом количестве точек и серий важно учитывать:

  • количество defs должно быть ограничено
  • одинаковые паттерны лучше переиспользовать
  • избегать избыточных градиентов на каждой серии
  • снижать детализацию для мобильных устройств

В сложных графиках часто применяется стратегия:

  • простая заливка по умолчанию
  • декоративные элементы только для ключевых серий

Комбинирование заливки и обводки в единый стиль

Наиболее устойчивые визуальные схемы строятся через баланс:

  • базовый цвет задаёт идентификацию серии
  • заливка формирует объём
  • обводка фиксирует границы
  • прозрачность управляет плотностью

Типовая конфигурация:

colors={{ scheme: 'set2' }}
areaOpacity={0.5}
borderWidth={1}
borderColor={{ from: 'color', modifiers: [['darker', 1.6]] }}

Такая комбинация обеспечивает стабильное восприятие даже при увеличении числа серий и плотности данных.

Оглавление