Радиальная область в D3.js представляет собой специализированный генератор геометрии, предназначенный для построения площадей в полярной системе координат. В отличие от классического генератора областей, работающего в декартовой системе, радиальная версия трансформирует данные так, чтобы значения интерпретировались как расстояния от центра и углы поворота вокруг него.
Генератор радиальной области опирается на преобразование координат вида:
Каждая точка исходного набора данных задаёт положение в полярной системе, где:
Геометрически область формируется как фигура между двумя кривыми:
Таким образом создаётся кольцевая или веерообразная форма, заполняемая цветом.
Преобразование из декартовой системы (x, y) в полярную (r, θ) является ключевым этапом:
В D3.js это преобразование инкапсулируется внутри генератора, освобождая от необходимости ручного вычисления координат.
Радиальная система особенно эффективна при визуализации циклических данных:
Генератор создаётся вызовом:
const area = d3.areaRadial();Возвращаемое значение — функция, принимающая массив данных и возвращающая SVG path-строку.
Основные методы конфигурации:
Каждый метод принимает accessor-функцию, которая определяет способ извлечения данных.
Угол задаёт позицию точки на окружности:
area.angle((d, i) => xScale(i));Чаще всего используется шкала времени или линейная шкала, преобразующая индекс в радианы.
При работе с временными данными:
const xScale = d3.scaleTime()
.domain([startDate, endDate])
.range([0, 2 * Math.PI]);Ключевая особенность радиальной области заключается в наличии двух радиальных функций.
Определяет внешнюю границу области:
area.outerRadius(d => yScale(d.value));Значения данных преобразуются в расстояние от центра визуализации.
Определяет внутреннюю границу:
area.innerRadius(d => yScale(d.base));Используется для создания:
Разница между outerRadius и innerRadius формирует толщину заполненной области.
Чаще всего используется массив объектов:
const data = [
{ time: 0, value: 30 },
{ time: 1, value: 50 },
{ time: 2, value: 40 },
{ time: 3, value: 70 }
];Применение генератора:
const radialArea = d3.areaRadial()
.angle(d => xScale(d.time))
.outerRadius(d => yScale(d.value))
.innerRadius(0);SVG path:
svg.append("path")
.datum(data)
.attr("d", radialArea);Шкалы выполняют преобразование данных в визуальные координаты.
Используются два основных типа:
Комбинация шкал обеспечивает корректную геометрическую интерпретацию.
Особенность заключается в том, что угол требует диапазона от 0 до 2π, а радиус — от 0 до внешнего радиуса диаграммы.
Форма области зависит от типа кривой:
area.curve(d3.curveCardinal);Поддерживаются различные режимы сглаживания:
Выбор кривой влияет на визуальную плавность переходов между точками.
При использовании linear формируется ломаная структура, при basis — сглаженная кривая.
Радиальная область поддерживает многослойные визуализации, где каждый слой представляет отдельный набор данных.
Структура данных:
const series = [
[
{ time: 0, value: 20 },
{ time: 1, value: 40 }
],
[
{ time: 0, value: 10 },
{ time: 1, value: 30 }
]
];Для каждого слоя создаётся отдельный генератор или переиспользуется базовый с изменением радиуса.
Пример:
svg.selectAll("path")
.data(series)
.enter()
.append("path")
.attr("d", d => radialArea(d));Радиальные области часто используются для замкнутых визуализаций, где последний элемент соединяется с первым.
Это достигается за счёт:
Циклическая структура особенно важна для временных циклов.
Радиальная область тесно связана с другими генераторами:
Отличие заключается в том, что areaRadial формирует заполненную область между двумя радиусами, а lineRadial — только контур.
Перед передачей в генератор данные часто сортируются по углу:
data.sort((a, b) => a.time - b.time);Сортировка обеспечивает корректное построение непрерывной фигуры без пересечений.
Также может выполняться нормализация значений радиуса для предотвращения выхода за пределы SVG-контейнера.
Радиальная визуализация требует смещения начала координат:
svg.attr("transform", "translate(width/2,height/2)");Центр становится точкой отсчёта, от которой откладываются радиусы.
Без центрирования визуализация теряет симметрию и интерпретацию.
Генерация SVG path выполняется на основе итерации по массиву данных.
Факторы влияния:
Оптимизация достигается за счёт:
При работе с радиальной областью проявляются характерные свойства:
Эти свойства определяют специфику визуального восприятия радиальных графиков.
Для добавления направляющих используются дополнительные элементы:
Шкалы строятся отдельно от генератора области, но синхронизируются по тем же domain и range.
Итоговая SVG-форма представляет собой замкнутую фигуру, ограниченную двумя функциями:
Область между ними заполняется цветом, формируя непрерывную радиальную поверхность, которая визуализирует зависимость величины от углового параметра.