Метки в ячейках TreeMap

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

Основная особенность TreeMap заключается в том, что каждая ячейка имеет переменную площадь, поэтому метки должны адаптироваться к размеру контейнера. Это делает систему рендеринга текста динамической и зависимой от геометрии узлов.

Включение и базовое поведение меток

Отображение текста в ячейках управляется свойством:

enableLabel: true

При установке enableLabel: true библиотека пытается автоматически разместить текст внутри каждого прямоугольника. Если пространство недостаточно, применяются дополнительные правила фильтрации отображения.

Минимальная конфигурация TreeMap с метками:

import { ResponsiveTreeMap } from '@nivo/treemap'

const data = {
    name: 'root',
    children: [
        { name: 'A', value: 120 },
        { name: 'B', value: 80 }
    ]
}

const TreeMapChart = () => (
    <ResponsiveTreeMap
        root={data}
        identity="name"
        value="value"
        innerPadding={3}
        outerPadding={3}
        enableLabel={true}
    />
)

Условия отображения текста

В Nivo используется несколько механизмов, определяющих, будет ли подпись показана внутри ячейки:

Минимальный размер ячейки

Параметр:

labelSkipSize: number

Определяет минимальную площадь (или линейный размер), при которой текст будет отображён.

Пример:

labelSkipSize={12}

Если ширина или высота ячейки меньше указанного значения, метка не отображается.

Логика скрытия при нехватке места

Даже если enableLabel включён, текст может быть скрыт автоматически при выполнении условий:

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

Форматирование текста меток

Контроль внешнего вида текста осуществляется через несколько параметров.

Цвет текста

labelTextColor

Поддерживает строку или функцию.

Статический вариант:

labelTextColor="#ffffff"

Функциональный вариант:

labelTextColor={node => node.color}

Часто используется контрастный подход:

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

Это позволяет автоматически адаптировать текст к фону ячейки.

Размер шрифта

labelFontSize

Пример:

labelFontSize={14}

Однако фиксированный размер используется редко, поскольку TreeMap требует адаптивного поведения. Чаще применяется масштабирование через SVG-контекст или кастомные рендереры.

Перенос и обрезка текста

В стандартной реализации Nivo текст внутри ячеек не переносится на несколько строк автоматически. Вместо этого применяется стратегия:

  • обрезка строки
  • сокращение текста
  • скрытие при недостатке места

Для управления этим поведением используется функция форматирования:

label={node => node.id}

С её помощью можно заранее подготовить короткие подписи:

label={node => node.id.length > 10 ? node.id.slice(0, 10) + '…' : node.id}

Пользовательская логика отображения меток

Для сложных случаев применяется функция label, позволяющая полностью контролировать содержимое:

<ResponsiveTreeMap
    root={data}
    identity="name"
    value="value"
    label={node => `${node.name} (${node.value})`}
/>

Такая схема увеличивает информативность, но требует контроля за длиной строки.

Приоритет отображения в плотных структурах

TreeMap часто содержит десятки или сотни узлов. В таких случаях система автоматически оптимизирует отображение меток:

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

Влияние оказывает сочетание параметров:

enableLabel
labelSkipSize
labelTextColor

Центрирование и позиционирование текста

По умолчанию текст размещается по центру ячейки. Это поведение фиксировано и оптимизировано под геометрию прямоугольников TreeMap.

Однако при кастомной отрисовке через layers можно изменить позиционирование:

layers={[
    'tiles',
    'labels',
    ({ nodes }) =>
        nodes.map(node => (
            <text
                key={node.id}
                x={node.x + node.width / 2}
                y={node.y + node.height / 2}
                textAnchor="middle"
                dominantBaseline="central"
            >
                {node.data.name}
            </text>
        ))
]}

Такой подход полностью заменяет стандартный слой меток.

Масштабирование текста в зависимости от размера ячейки

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

Пример логики:

label={node => {
    const area = node.width * node.height

    if (area < 400) return ''
    if (area < 900) return node.data.name.slice(0, 3)

    return node.data.name
}}

Это позволяет:

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

Стилизация через theme

Глобальная стилизация меток возможна через объект theme:

theme={{
    labels: {
        text: {
            fontSize: 13,
            fontWeight: 600
        }
    }
}}

Это влияет на все текстовые элементы TreeMap, включая подписи внутри ячеек.

Контраст текста и фона

Для обеспечения читаемости применяется динамическое вычисление цвета текста относительно фона. В Nivo это часто реализуется через модификаторы:

labelTextColor={{
    from: 'color',
    modifiers: [['darker', 1.8]]
}}

Альтернативный подход — фиксированный белый текст:

labelTextColor="#fff"

но он подходит только для тёмных палитр.

Ограничения стандартной системы меток

Система меток TreeMap имеет ряд особенностей:

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

Эти ограничения компенсируются через кастомные слои и функцию label.

Поведение при анимации

TreeMap в Nivo поддерживает анимации переходов. Метки при этом:

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

Анимационное поведение контролируется глобальными параметрами motionConfig, но напрямую на текст влияет только геометрия узла.

Использование условных меток

В сложных визуализациях применяется условное отображение:

label={node =>
    node.value > 100 ? node.data.name : ''
}

Это позволяет фокусироваться на значимых данных и уменьшать визуальный шум.

Комбинирование меток с цветовой семантикой

Часто метка используется вместе с цветовой кодировкой:

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

Пример:

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

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

Оглавление