Компонент TreeMap в библиотеке Nivo строится вокруг иерархической структуры данных, где каждый узел может содержать вложенные элементы и числовые значения, определяющие площадь отображаемых прямоугольников.
Минимально корректная структура данных выглядит как дерево:
id)childrenvalueКлючевым моментом является то, что визуализация рассчитывает площадь
прямоугольников исключительно на основе value, а структура
вложенности определяет иерархию группировки.
Особое значение имеет параметр identity, который задаёт
поле уникальной идентификации узла. В типичной конфигурации:
identity: "id" — используется поле idПоле value может быть вычислено автоматически, если
задана агрегирующая структура, либо передаваться явно на уровне
листьев.
Компонент <TreeMap /> из пакета
@nivo/treemap поддерживает широкий набор настроек, влияющих
как на визуальное представление, так и на алгоритм раскладки.
data — иерархический объектidentity — ключ уникальности узловvalue — поле, используемое для расчёта площадиvalueFormat — форматирование чисел (например, d3-format
строка)margin — внешние отступы графикаouterPadding — расстояние между корневыми
элементамиinnerPadding — расстояние между вложенными блокамиlabel — функция формирования подписиlabelSkipSize — минимальный размер элемента, при
котором отображается текстlabelTextColor — цвет текстаorientLabel — поворот текста внутри блокаЛейблы в TreeMap напрямую зависят от доступной площади. При малых
размерах узла подпись автоматически скрывается, если задан порог через
labelSkipSize.
TreeMap активно использует цвет для кодирования категорий или значений.
Основные параметры:
colors — палитра или функция генерации
цвета
colorBy — стратегия распределения цвета:
"id" — по идентификатору"depth" — по уровню вложенности"parentColor" — наследование цвета от родителяТакже возможно использование кастомных функций:
(node) => node.data.value > 100 ? '#ff4d4d' : '#4d79ff'Цветовая модель становится особенно важной при работе с глубокими деревьями, где визуальная сегментация уровней улучшает читаемость.
Сердце TreeMap — алгоритм раскладки прямоугольников. В Nivo
используется система тайлинга из d3-hierarchy, которая
определяет, как именно пространство делится между узлами.
Параметр:
tileопределяет стратегию разбиения.
Squarify стремится минимизировать отклонение от квадратной формы блоков.
Поведение:
Это стандартный режим, используемый по умолчанию.
Алгоритм binary рекурсивно делит пространство пополам.
Особенности:
Подходит для случаев, где важна структурная согласованность, а не визуальная эстетика.
Slice реализует горизонтальное разбиение:
Характеристики:
Dice — вертикальный аналог slice:
Используется для:
Комбинированный алгоритм:
Особенности:
TreeMap обрабатывает каждый уровень дерева независимо, но в рамках выбранного алгоритма.
Глубина влияет на:
На верхних уровнях:
На нижних уровнях:
Параметры:
innerPaddingouterPaddingопределяют визуальное разделение элементов.
Разделяет дочерние элементы внутри одного родителя.
Эффекты:
Отделяет разные ветви дерева.
Используется для:
TreeMap поддерживает настройку визуального оформления границ:
borderColor — цвет рамкиborderWidth — толщина линийborderOpacity — прозрачность границГраницы играют важную роль в восприятии структуры, особенно при плотной упаковке элементов.
Nivo использует react-spring для анимации переходов.
Ключевые параметры:
animate — включение анимацииmotionConfig — пресет скорости и плавностиТипичные конфигурации:
gentle — мягкие переходыwobbly — более выраженные колебанияstiff — быстрые и резкие переходыАнимация применяется к:
Label rendering зависит от геометрии узла.
Основные стратегии:
Дополнительные параметры:
labelSkipSize — минимальный размер блокаlabelRotation — угол поворотаlabelPadding — внутренний отступ текстаПри глубокой вложенности часто используется стратегия полного отключения подписей на нижних уровнях, с переносом смысловой нагрузки на цвет.
TreeMap допускает передачу функций для кастомизации поведения:
label — кастомный рендер текстаvalueFormat — форматирование чиселtooltip — кастомные всплывающие подсказкиcolors — динамическое вычисление цветаФункциональный подход позволяет интегрировать:
TreeMap оптимизирован для работы с большими деревьями, однако производительность зависит от:
Основные факторы нагрузки:
Оптимизационные подходы:
При обновлении data происходит полная перерасчётная
стадия:
Если изменяется только часть дерева, всё равно пересчитывается вся структура, так как layout зависит от глобального распределения значений.
TreeMap поддерживает события:
onClick — клик по узлуonMouseEnter — наведениеonMouseLeave — уход курсораКаждое событие передаёт объект узла с полной метаинформацией:
idvaluedepthparentЭта информация используется для построения интерактивных интерфейсов, фильтрации и drill-down навигации по данным.