Компонент Sunburst: иерархические кольцевые диаграммы

Компонент Sunburst в Nivo строится вокруг иерархической структуры данных, где каждый узел представляет собой сектор кольца, а вложенные узлы формируют внутренние кольца. Основное требование — древовидный формат данных.

Типичная структура:

const data = {
    name: "root",
    children: [
        {
            name: "group A",
            children: [
                { name: "A1", value: 10 },
                { name: "A2", value: 20 }
            ]
        },
        {
            name: "group B",
            children: [
                { name: "B1", value: 15 },
                { name: "B2", value: 5 }
            ]
        }
    ]
}

Ключевые особенности структуры:

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

Подключение и базовая конфигурация компонента

Sunburst доступен в пакете @nivo/sunburst. Основной компонент — ResponsiveSunburst.

npm install @nivo/sunburst

Базовое использование:

import { ResponsiveSunburst } from '@nivo/sunburst'

const MySunburst = ({ data }) => (
    <ResponsiveSunburst
        data={data}
        margin={{ top: 10, right: 10, bottom: 10, left: 10 }}
        id="name"
        value="value"
        cornerRadius={2}
        borderWidth={1}
        borderColor={{ theme: 'background' }}
    />
)

Параметры:

  • id — поле, определяющее имя узла
  • value — числовое значение листа
  • margin — отступы визуализации
  • cornerRadius — скругление сегментов
  • borderColor — цвет границ секторов

Принцип построения колец и вычисление долей

Sunburst использует радиальную декомпозицию пространства. Каждый уровень дерева отображается как отдельное кольцо, где:

  • центр — корневой узел
  • радиус увеличивается с глубиной
  • угол сектора пропорционален значению

Логика распределения:

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

Это позволяет визуализировать иерархии без потери относительных величин.

Настройка цветовой схемы

Цвета в Sunburst критичны для восприятия структуры. Nivo предоставляет несколько стратегий.

Категориальная схема

<ResponsiveSunburst
    data={data}
    colors={{ scheme: 'nivo' }}
/>

Функция на основе глубины

<ResponsiveSunburst
    data={data}
    colors={({ depth }) => {
        const palette = ['#4f46e5', '#06b6d4', '#10b981', '#f59e0b']
        return palette[depth % palette.length]
    }}
/>

Наследование цвета родителя

colors={{ datum: 'parent.color' }}

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

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

Управление подписями сегментов

Отображение текста внутри секторов требует баланса между информативностью и плотностью данных.

<ResponsiveSunburst
    data={data}
    enableArcLabels={true}
    arcLabel="id"
    arcLabelsSkipAngle={10}
    arcLabelsTextColor="#ffffff"
/>

Параметры:

  • enableArcLabels — включает подписи
  • arcLabelsSkipAngle — минимальный угол для отображения
  • arcLabelsTextColor — цвет текста
  • arcLabel — поле или функция для текста

Функциональные подписи:

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

Взаимодействие с элементами диаграммы

Sunburst поддерживает hover, click и выделение узлов.

<ResponsiveSunburst
    data={data}
    onCl ick={(node) => {
        console.log(node.id, node.value)
    }}
    isInteractive={true}
    animate={true}
/>

Доступные события:

  • onClick — выбор узла
  • onMouseEnter — наведение
  • onMouseLeave — уход курсора

Состояние узлов:

  • active — текущий hover
  • selected — выбранный элемент
  • disabled — исключён из взаимодействия

Tooltip и кастомизация подсказок

Tooltip позволяет отображать контекстную информацию о сегменте.

<ResponsiveSunburst
    data={data}
    tooltip={({ id, value, depth, color }) => (
        <div style={{ padding: 8, background: '#111', color: '#fff' }}>
            <strong>{id}</strong>
            <div>Значение: {value}</div>
            <div>Глубина: {depth}</div>
        </div>
    )}
/>

Полезные поля node:

  • id
  • value
  • depth
  • color
  • path

Анимации и переходы состояний

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

<ResponsiveSunburst
    data={data}
    animate={true}
    motionConfig="gentle"
/>

Типы motionConfig:

  • wobbly — выраженная динамика
  • gentle — мягкие переходы
  • stiff — более резкие изменения

При обновлении данных:

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

Контроль внутреннего и внешнего радиуса

Sunburst позволяет управлять геометрией диаграммы.

<ResponsiveSunburst
    data={data}
    innerRadius={0.2}
    cornerRadius={3}
/>

Параметры:

  • innerRadius — доля пустого центра (0–1)
  • cornerRadius — скругление сегментов

Эффекты:

  • меньший innerRadius увеличивает плотность центра
  • больший innerRadius улучшает читаемость вложенных уровней

Работа с большими наборами данных

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

Рекомендации:

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

Пример оптимизации:

<ResponsiveSunburst
    data={data}
    animate={false}
    enableArcLabels={false}
    motionConfig="stiff"
/>

Фильтрация и трансформация данных

Перед передачей в Sunburst часто требуется предобработка.

Пример агрегации:

function aggregate(node) {
    if (!node.children) return node

    const value = node.children.reduce((acc, child) => {
        const processed = aggregate(child)
        return acc + (processed.value || 0)
    }, 0)

    return {
        ...node,
        value,
        children: node.children.map(aggregate)
    }
}

Использование:

<ResponsiveSunburst data={aggregate(data)} />

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

Nivo поддерживает глобальную тему оформления.

<ResponsiveSunburst
    data={data}
    theme={{
        text: {
            fontSize: 12,
            fill: '#333'
        },
        tooltip: {
            container: {
                background: '#222',
                color: '#fff'
            }
        }
    }}
/>

Возможности:

  • настройка шрифтов
  • управление цветами текста
  • стилизация tooltip
  • контроль сеточных элементов

Сценарии использования Sunburst

Типичные области применения:

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

Особенность подхода:

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