Система отступов: margin и padding

Визуальные компоненты в Nivo строятся вокруг SVG-контейнера, внутри которого размещается область построения графика, оси, легенды и вспомогательные элементы. Отступы в этой системе определяют, как именно распределяется доступное пространство между внешней рамкой компонента и областью отрисовки данных, а также как элементы внутри графика отделяются друг от друга.

Margin как основной внешний отступ

Параметр margin в большинстве компонентов Nivo задаёт внешний отступ между границей SVG и областью графика. Он всегда передаётся в виде объекта:

margin={{ top: 50, right: 60, bottom: 70, left: 80 }}

Каждое поле отвечает за конкретную сторону:

  • top — пространство сверху
  • right — пространство справа
  • bottom — пространство снизу
  • left — пространство слева

Роль margin в структуре графика

Внутренняя область визуализации рассчитывается как:

ширина_контейнера - left - right
высота_контейнера - top - bottom

Это означает, что margin напрямую влияет на доступную площадь для отрисовки данных.

Пример использования в ResponsiveLine

import { ResponsiveLine } from '@nivo/line'

const MyChart = () => (
    <ResponsiveLine
        data={data}
        margin={{ top: 40, right: 50, bottom: 60, left: 70 }}
        xScale={{ type: 'point' }}
        yScale={{ type: 'linear' }}
    />
)

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

Margin и оси координат

Оси (axisTop, axisRight, axisBottom, axisLeft) напрямую влияют на требования к отступам. Чем сложнее оформление оси, тем больше пространства требуется.

Факторы увеличения отступов

  • длинные подписи значений
  • повернутые метки (tickRotation)
  • увеличенная толщина шрифтов
  • дополнительные подписи (legend у оси)

Пример:

axisBottom={{
    tickRotation: -45,
    legend: 'Дата измерения',
    legendOffset: 50
}}

При повороте текста на -45° требуется увеличить bottom margin, иначе подписи выходят за пределы видимой области.

Влияние легенды на отступы

Легенды в Nivo размещаются либо внутри графика, либо в пределах margin-зон. При использовании внешних позиций (top, bottom, left, right) они фактически «съедают» часть отступов.

legends={[
    {
        anchor: 'bottom-right',
        direction: 'column',
        translateY: 50,
        itemWidth: 100,
        itemHeight: 20
    }
]}

Если легенда размещена снизу, необходимо увеличить bottom margin, иначе элементы легенды будут обрезаны.

Автоматическая и ручная настройка margin

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

Типичный дефолт:

margin={{ top: 50, right: 50, bottom: 50, left: 50 }}

При усложнении графика требуется ручная настройка.

Практика подбора margin

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

Padding внутри графиков

В отличие от margin, параметр padding отвечает за внутренние расстояния между элементами данных. Он используется не во всех типах графиков, но встречается в ключевых компонентах.

Padding в Bar Chart

В столбчатых диаграммах padding определяет расстояние между барами:

<ResponsiveBar
    data={data}
    padding={0.3}
/>

Поведение padding

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

Влияние на читаемость

Больший padding:

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

Меньший padding:

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

Padding в Pie Chart

В круговых диаграммах используется параметр padAngle, который выполняет роль разделителя между сегментами:

<ResponsivePie
    data={data}
    padAngle={1}
/>

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

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

При больших значениях круг «разрывается», при нулевом значении сегменты сливаются.

Внутренние отступы в Heatmap

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

<ResponsiveHeatMap
    data={data}
    padding={2}
/>

Здесь padding задаёт расстояние между прямоугольниками сетки.

Влияние на визуализацию

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

Взаимодействие margin и padding

Margin и padding в Nivo решают разные задачи, но часто влияют друг на друга в рамках общей композиции.

Основные различия

  • margin — внешнее пространство вокруг области графика
  • padding — внутренние расстояния между элементами данных

Типичный конфликт

При увеличении padding внутри bar chart может потребоваться корректировка margin, чтобы сохранить баланс композиции, особенно если оси или легенды начинают занимать больше визуального пространства.

Особенности responsive-контейнеров

Компоненты Responsive* в Nivo автоматически подстраиваются под размер родителя, но не пересчитывают margin и padding динамически под содержимое.

Это означает:

  • изменение размеров контейнера не исправляет переполненные оси
  • длинные подписи требуют ручной настройки margin
  • плотные данные требуют корректировки padding независимо от ширины экрана

Типовые ошибки при работе с отступами

Часто встречаются следующие проблемы:

  • недостаточный bottom margin при повороте подписей оси X
  • слишком маленький left margin при длинных числовых значениях
  • отсутствие учёта легенды при позиционировании справа
  • чрезмерный padding в bar chart, приводящий к визуальной разрозненности данных
  • игнорирование влияния fontSize на требуемое пространство

Связь отступов с типографикой

Шрифты в Nivo напрямую влияют на требования к margin. Увеличение fontSize в theme или axis-настройках увеличивает риск перекрытия элементов.

theme={{
    axis: {
        ticks: {
            text: {
                fontSize: 14
            }
        }
    }
}}

При увеличении размера текста требуется пересмотр отступов, особенно по нижней и левой границе.

Баланс плотности и читаемости

Система отступов в Nivo фактически управляет балансом между:

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

Margin определяет, сколько места остаётся под служебные элементы, а padding регулирует плотность самой визуализации данных внутри этого пространства.

Оглавление