В библиотеке Nivo (в частности в компонентах круговых и дуговых диаграмм) визуальное поведение дуг определяется набором параметров, которые влияют на расстояния между сегментами, форму их краёв и порядок отображения данных. Эти параметры критичны для читаемости диаграммы при работе с плотными наборами данных и при необходимости акцентирования отдельных значений.
Круговая диаграмма в Nivo строится как набор дуг, каждая из которых представляет долю от общего значения. Геометрически каждая дуга определяется углом начала и конца, радиусом и внутренним радиусом (для donut-режима). Поведение сегментов модифицируется через дополнительные свойства, влияющие на визуальные разрывы и форму границ.
Основные элементы модели:
На уровне визуализации именно дополнительные параметры задают «характер» дуг: разреженность, мягкость границ и порядок следования.
Параметр padAngle определяет угловой зазор между
соседними сегментами. Он задаётся в радианах и влияет на визуальное
разделение данных без необходимости использования контуров.
<Pie
data={data}
margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
innerRadius={0.5}
padAngle={0.7}
/>При увеличении значения:
При значении, близком к нулю:
Параметр cornerRadius управляет скруглением внешних и
внутренних углов дуг. Он влияет на восприятие формы сегментов, делая их
более мягкими или строгими.
<Pie
data={data}
innerRadius={0.6}
cornerRadius={4}
/>При увеличении значения:
При значении 0:
Порядок дуг в диаграмме определяется либо исходным порядком данных,
либо параметром сортировки. В Nivo для круговых диаграмм используется
управление через sortByValue, которое влияет на
позиционирование сегментов по величине.
<Pie
data={data}
sortByValue={true}
/>Существует два базовых режима:
Сортировка напрямую влияет на читаемость и визуальную интерпретацию диаграммы.
При сортировке по значению:
При сохранении исходного порядка:
Наиболее важный эффект достигается при совместном использовании всех трёх параметров.
<Pie
data={data}
innerRadius={0.6}
padAngle={1.2}
cornerRadius={6}
sortByValue={true}
/>Характеристики:
Такой набор параметров используется при необходимости выделить отдельные категории в плотных наборах данных.
<Pie
data={data}
innerRadius={0.4}
padAngle={0}
cornerRadius={0}
sortByValue={false}
/>Характеристики:
Подходит для аналитических представлений, где важна точная структура входного массива.
Каждый из параметров влияет на итоговую геометрию сегмента через изменение его угловых границ.
padAngle уменьшает доступный угол сегментаcornerRadius модифицирует форму границы без изменения
углаsortByValue изменяет позицию сегмента в окружности без
изменения его геометрииТаким образом:
При экстремальных значениях параметров возможны следующие эффекты:
Баланс между параметрами определяет конечную читаемость и эстетическую стабильность диаграммы.