Метки на дугах: radialLabel и arcLabel

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

arcLabel в диаграммах с дугами

Параметр arcLabel применяется в компонентах, где данные представлены в виде сегментов окружности: pie chart, donut chart и близких к ним визуализациях.

Основная задача — определить текст, который будет отображён внутри каждого сектора дуги.

Форматы задания arcLabel

arcLabel может быть задан несколькими способами:

  • строка с именем поля данных
  • функция форматирования
  • вычисляемое значение через callback

Использование строкового формата

При простом сценарии достаточно указать ключ поля:

arcLabel: "id"

или

arcLabel: "value"

В этом случае библиотека берёт значение напрямую из объекта данных.

Функциональный формат arcLabel

Функция используется для более сложной логики отображения:

arcLabel: (d) => `${d.id}: ${d.value}`

Здесь d — объект сегмента, содержащий:

  • id сегмента
  • value числовое значение
  • percentage (в некоторых конфигурациях)
  • color
  • label (если предварительно задан)

Функциональный подход позволяет:

  • форматировать числа
  • добавлять единицы измерения
  • скрывать малые значения
  • комбинировать поля

Условное отображение подписей

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

arcLabel: (d) => {
    if (d.value < 10) return "";
    return `${d.value}`;
}

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

Влияние компоновки на arcLabel

В donut-диаграммах с внутренним отверстием пространство внутри сегмента ограничено, поэтому arcLabel:

  • часто сокращается
  • переносится в tooltip
  • или отключается для мелких сегментов

Стилизация arcLabel

Подписи дуг поддерживают стилизацию через theme и индивидуальные настройки слоя (layer).

Основные параметры:

  • fontSize
  • fontWeight
  • fill
  • textAnchor
  • dominantBaseline

Пример кастомизации:

arcLabelsTextColor: {
    from: "color",
    modifiers: [["darker", 2]]
},
arcLabelsRadiusOffset: 0.6

Эти настройки позволяют управлять:

  • положением текста относительно центра
  • контрастом относительно сегмента
  • читаемостью на плотных графиках

Ограничения arcLabel

При высокой плотности данных возникают проблемы:

  • перекрытие подписей
  • снижение читаемости
  • потеря контекста

Для решения используются стратегии:

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

radialLabel в радиальных диаграммах

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

radialLabel отвечает за текстовые подписи, связанные с радиальной осью или отдельными сегментами.

Форматы radialLabel

Как и arcLabel, radialLabel поддерживает несколько форматов:

Строковое значение поля

radialLabel: "label"

Используется, когда данные уже содержат готовый текст.

Функция форматирования

radialLabel: (d) => `${d.label} (${d.value})`

Объект d обычно включает:

  • id
  • value
  • index
  • data (исходный объект)

Преобразование значений

Часто radialLabel используется для нормализации данных:

radialLabel: (d) => Math.round(d.value)

или добавления единиц:

radialLabel: (d) => `${d.value} ms`

Позиционирование radialLabel

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

  • внутренний радиус
  • внешний радиус
  • padding между барами

При плотной компоновке radialLabel может:

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

Вращение и ориентация текста

Для повышения читаемости применяется поворот:

radialLabelsTextXOffset: 6
radialLabelsTextColor: "#333"

или вычисляемая ориентация:

  • текст вдоль радиуса
  • текст по горизонтали
  • адаптивное выравнивание

Сравнение arcLabel и radialLabel

Область применения

  • arcLabel — сегменты окружности (pie, donut)
  • radialLabel — радиальные бары и оси

Геометрия отображения

  • arcLabel размещается внутри дуги
  • radialLabel располагается вдоль радиального направления

Типичные задачи

arcLabel:

  • доли и проценты
  • распределение категорий

radialLabel:

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

Оптимизация отображения подписей

При работе с большими наборами данных критично контролировать визуальный шум.

Применяются подходы:

Фильтрация

arcLabel: (d) => d.value > 5 ? d.value : ""

Округление значений

radialLabel: (d) => d.value.toFixed(1)

Замена текста на символы

arcLabel: (d) => d.value > 50 ? "●" : ""

Влияние tooltip на arcLabel и radialLabel

При перегруженной визуализации часть информации переносится в tooltip, а подписи оставляются минимальными:

  • идентификатор
  • краткое значение
  • процентное соотношение

Это снижает зависимость от постоянных labels и повышает читаемость графика.

Работа с пользовательскими данными

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

Пример для arcLabel:

const data = [
    { id: "A", value: 30 },
    { id: "B", value: 70 }
];

Пример для radialLabel:

const data = [
    { label: "North", value: 40 },
    { label: "South", value: 60 }
];

Если структура нестандартная, mapping выполняется внутри callback:

radialLabel: (d) => d.data.customName

Частые ошибки при использовании

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

Взаимодействие с анимацией

При включённой анимации подписи:

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

Функциональные labels должны быть детерминированными, чтобы избежать мерцания.

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

При большом количестве сегментов:

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

Оптимизация:

const formatter = (v) => `${v}%`;

arcLabel: (d) => formatter(d.value)
Оглавление