Сетка: gridX, gridY, кастомные значения

Система сетки в Nivo является базовым слоем визуализации, на который накладываются оси, серии данных, аннотации и интерактивные элементы. В большинстве компонентов (Line, Bar, Scatter, Stream) сетка формируется двумя независимыми осями: вертикальной и горизонтальной, управляемыми параметрами gridX и gridY.

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

  • горизонтальные линии помогают соотносить значения по оси Y
  • вертикальные линии помогают отслеживать изменения по оси X
  • плотность сетки определяет визуальную «нагруженность» графика

В Nivo сетка является частью SVG-рендеринга и зависит от масштаба осей, доменов и tick-конфигурации.

gridY: горизонтальная сетка

Параметр gridY управляет отображением горизонтальных линий сетки, соответствующих значениям по оси Y.

Базовая конфигурация

<ResponsiveLine
    data={data}
    margin={{ top: 50, right: 50, bottom: 50, left: 60 }}
    gridY={true}
/>

При значении true библиотека автоматически строит линии на основе tick-значений оси Y.

Отключение сетки

gridY={false}

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

Поведение при кастомных осях

Если задана ось Y через yScale и axisLeft, сетка адаптируется к tick-логике:

axisLeft={{
    tickSize: 0,
    tickPadding: 10,
    tickRotation: 0
}}

Изменение tick-конфигурации напрямую влияет на частоту горизонтальных линий.

gridX: вертикальная сетка

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

Включение вертикальной сетки

<ResponsiveLine
    data={data}
    gridX={true}
/>

При временных рядах (time scale) вертикальная сетка часто совпадает с датами или интервалами времени.

Отключение gridX

gridX={false}

Используется в случаях, когда ось X перегружена (например, длинные подписи категорий) или требуется акцент на тренде без временных делений.

Взаимодействие gridX и gridY

Комбинация двух параметров формирует классическую координатную плоскость:

gridX={true}
gridY={true}

При этом:

  • плотность сетки определяется tick-значениями
  • масштаб влияет на расстояние между линиями
  • тип шкалы (linear, time, point) изменяет распределение сетки

Кастомизация через tickValues

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

Фиксированные значения оси Y

axisLeft={{
    tickValues: [0, 20, 40, 60, 80, 100]
}}

В этом случае горизонтальная сетка будет строго соответствовать указанным уровням.

Автоматическое распределение

axisLeft={{
    tickValues: "every 10"
}}

Логика деления зависит от диапазона данных и автоматически подстраивается под domain.

Кастомные значения сетки через scale

Сетка в Nivo не существует отдельно от шкал. Изменение scale напрямую влияет на gridX/gridY.

Линейная шкала

yScale={{
    type: "linear",
    min: 0,
    max: 100
}}

При фиксированном диапазоне сетка становится равномерной и предсказуемой.

Логарифмическая шкала

yScale={{
    type: "log",
    base: 10,
    min: 1,
    max: 1000
}}

В этом случае линии сетки распределяются неравномерно, отражая экспоненциальный рост значений.

Полная кастомизация сетки через theme

Nivo предоставляет централизованную настройку внешнего вида сетки через theme.

theme={{
    grid: {
        line: {
            stroke: "#e0e0e0",
            strokeWidth: 1
        }
    }
}}

Раздельное стилизование X и Y

Хотя глобальный theme влияет на оба направления, часто требуется визуально различать их через кастомные слои:

gridX={true}
gridY={true}
theme={{
    grid: {
        line: {
            stroke: "#ddd",
            strokeDasharray: "4 4"
        }
    }
}}

Отключение сетки с сохранением осей

Иногда требуется оставить только оси без фоновой структуры:

gridX={false}
gridY={false}
axisLeft={{ tickSize: 5 }}
axisBottom={{ tickSize: 5 }}

Это характерно для дашбордов, где сетка заменяется направляющими или tooltip-интеракциями.

Поведение gridX/gridY в Bar-чартах

В Bar-компонентах сетка работает аналогично Line, но привязка по X часто категориальная.

<ResponsiveBar
    data={data}
    gridX={true}
    gridY={true}
/>

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

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

Плотность сетки и производительность

Хотя gridX/gridY не являются вычислительно тяжёлыми, чрезмерное количество tick-значений приводит к:

  • перегрузке SVG DOM
  • ухудшению читаемости
  • визуальному конфликту с данными

Оптимизация достигается через:

axisBottom={{
    tickValues: "every 5"
}}

или ограничение domain:

yScale={{
    min: 0,
    max: 200
}}

Скрытая зависимость сетки от margin

Сетка отрисовывается внутри области графика, определяемой margin:

margin={{ top: 40, right: 40, bottom: 60, left: 60 }}

Недостаточный margin приводит к:

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

Кастомные сетки через layers

Nivo позволяет полностью заменить стандартную сетку через систему layers.

layers={[
    "grid",
    "axes",
    "lines",
    "points"
]}

При исключении "grid" можно реализовать собственную отрисовку:

const CustomGrid = ({ width, height, yScale }) => {
    const lines = yScale.ticks(5).map(value => ({
        y: yScale(value)
    }));

    return lines.map((line, i) => (
        <line
            key={i}
            x1={0}
            x2={width}
            y1={line.y}
            y2={line.y}
            stroke="#ccc"
        />
    ));
};

Сеточные паттерны и визуальные стили

Grid может быть не только сплошным, но и стилизованным:

theme={{
    grid: {
        line: {
            strokeDasharray: "2 2",
            strokeOpacity: 0.5
        }
    }
}}

Часто используются варианты:

  • пунктирная сетка для аналитических графиков
  • тонкая сплошная для финансовых графиков
  • ослабленная сетка для UI с высокой плотностью данных

Итоговая модель поведения gridX/gridY

Сетка в Nivo формируется как производная от:

  • scale (тип и диапазон)
  • axis tick configuration
  • theme стилизации
  • margin области отрисовки
  • выбранного chart type

Параметры gridX и gridY выступают переключателями уровней детализации визуальной структуры координатной плоскости, а не изолированными визуальными эффектами.

Оглавление