Расположение элементов в Nivo строится вокруг принципа декларативной конфигурации, где структура данных и параметры визуализации определяют сетку отображения. Для визуализаций, основанных на прямоугольной или табличной модели (heatmap, treemap-подобные представления, bar chart с группировкой), управление рядами, колонками и отступами ячеек становится ключевым инструментом формирования читаемой композиции.
В сеточных визуализациях Nivo данные интерпретируются как двумерная структура, где:
В зависимости от компонента, эта модель реализуется по-разному:
@nivo/heatmap) строки формируются
через indexBy, а колонки через keys@nivo/bar) ряды соответствуют
элементам массива, а колонки — категориям внутри нихКлючи задают фиксированное множество колонок:
keys: ['A', 'B', 'C', 'D']Каждый ключ становится отдельной вертикальной осью, а значения данных сопоставляются этим осям. Порядок ключей определяет порядок колонок в визуализации.
Для тепловых карт и табличных структур:
indexBy: 'country'Каждое уникальное значение поля формирует отдельный ряд. Таким образом создаётся матрица:
Плотность отображения определяется соотношением количества рядов и колонок к доступному пространству. Nivo не управляет этим напрямую через фиксированную сетку, но предоставляет инструменты косвенной настройки:
margin — внешние отступы компонентаinnerPadding (в отдельных компонентах) — внутренние
интервалы между группамиpadding — расстояние между элементами внутри
категорийВ bar chart ключевым параметром становится:
padding: 0.3Этот параметр управляет расстоянием между столбцами внутри одной категории. Чем выше значение, тем более «воздушной» становится сетка.
Отступы между ячейками влияют на читаемость структуры и визуальное разделение данных.
В различных компонентах Nivo используются разные подходы:
В @nivo/heatmap ключевым параметром является:
cellOpacitycellBorderColorcellBorderWidthХотя прямого параметра cellSpacing нет, эффект
разделения достигается через:
Пример конфигурации:
cellBorderWidth: 2,
cellBorderColor: '#ffffff'Белая граница создаёт эффект сеточного отступа между ячейками, визуально заменяя spacing.
В столбчатых графиках расстояние между элементами определяется через комбинацию:
padding — расстояние между группамиcategorySpacing (внутренний механизм layout)barComponent размерыПри уменьшении padding столбцы начинают «слипаться», образуя плотную колонковую структуру.
Размер ячейки в Nivo не задаётся напрямую, а вычисляется автоматически:
Однако можно влиять на итоговую геометрию через:
height и width контейнераmarginЧем больше элементов в сетке, тем меньше каждая ячейка при фиксированном контейнере.
Nivo использует систему автоматического распределения, где важно учитывать:
Для контроля используются:
enableGridX: true
enableGridY: trueВ некоторых компонентах это влияет не только на отображение линий сетки, но и на восприятие структуры рядов и колонок.
Сортировка данных напрямую изменяет визуальную структуру:
В heatmap часто используется предварительная обработка:
data.sort((a, b) => a.value - b.value)Это приводит к перераспределению плотности цветовых зон по сетке.
Nivo построен на SVG и responsive контейнерах, поэтому структура рядов и колонок зависит от размеров контейнера.
При изменении ширины:
При изменении высоты:
При высокой плотности данных возникает проблема перекрытия:
Для решения используются:
marginТипичная конфигурация плотной сетки:
<ResponsiveHeatMap
data={data}
keys={['a', 'b', 'c', 'd', 'e']}
indexBy="id"
margin={{ top: 50, right: 60, bottom: 60, left: 80 }}
cellBorderWidth={1}
cellBorderColor="#ffffff"
enableLabels={false}
/>Здесь структура рядов и колонок становится основой визуальной матрицы, а отступы формируются границами и внешними полями.
Основная задача настройки рядов, колонок и отступов заключается в поиске баланса:
Оптимальная конфигурация достигается через итеративную настройку параметров layout и визуальных разделителей, где каждый элемент сетки остаётся различимым без потери целостности общей структуры данных.