Дуга

// Спецификация одиночного представления
{
  "data": ... ,
  "mark": "arc",
  "encoding": ... ,
  ...
}

Примитив arc строит круговую дугу по центру, угловым и радиальным границам. Дуги используют в круговых и кольцевых диаграммах.

Содержание страницы

Свойства дуги

// Спецификация одиночного представления
{
  ...,
  "mark": {
    "type": "arc",
    ...
  },
  "encoding": ... ,
  ...
}

Помимо общих свойств примитивов, дуга поддерживает:

Свойство Тип Описание
radius number, ExprRef Для дуг — основной (внешний) радиус в пикселях, неотрицательный.

Для текста — радиальное смещение в полярных координатах относительно начала, определяемого свойствами x и y.

По умолчанию: min(plot_width, plot_height)/2.
radius2 number, ExprRef Второй (внутренний) радиус дуги в пикселях, неотрицательный.

По умолчанию: 0.
innerRadius number, ExprRef Внутренний радиус дуги в пикселях, неотрицательный. Псевдоним radius2.

По умолчанию: 0.
outerRadius number, ExprRef Внешний радиус дуги в пикселях, неотрицательный. Псевдоним radius.

По умолчанию: min(plot_width, plot_height)/2, как у radius.
theta number, ExprRef Для дуги — угловая длина в радианах, если theta2 не задано; иначе начальный угол дуги. Ноль направлен вверх («на север»), положительное направление — по часовой стрелке.

Для текста — угол в полярных координатах, в радианах.
theta2 number, ExprRef Конечный угол дуги в радианах. Ноль направлен вверх («на север»), положительное направление — по часовой стрелке.
cornerRadius number, ExprRef Радиус скругления углов прямоугольников или дуг, в пикселях.

По умолчанию: 0.
padAngle number, ExprRef Угловой отступ по бокам дуги, в радианах.
radiusOffset number, ExprRef Смещение radius.
radius2Offset number, ExprRef Смещение radius2.
thetaOffset number, ExprRef Смещение theta.
theta2Offset number, ExprRef Смещение theta2.

Примеры

Круговая и кольцевая диаграммы

Для круговой диаграммы сопоставьте значения с theta, а категории — с color:

Ненулевой innerRadius создаёт отверстие в центре и превращает диаграмму в кольцевую:

Дополнительный текстовый слой подписывает сегменты:

Для совпадения расположения текста и сегментов в этом варианте в канале theta нужно явно задать stack: true.

Всплывающие подсказки

Чтобы добавить подсказку, задайте tooltip: true в объекте mark:

По умолчанию подсказка показывает фактическое значение поля theta.

Значение stack: "normalize" позволяет выводить долю каждого сегмента в процентах от полного круга.

Настройка дуг

// Спецификация представления верхнего уровня
{
  ...,
  "config": {
    "arc": ...,
    ...
  }
}

Свойство arc объекта config верхнего уровня задаёт стандартные свойства всех дуг. Каналы свойств примитива переопределяют эти значения.

Конфигурация может содержать любые свойства дуг, кроме type, style и clip.

Круговые диаграммы по панелям

В панельной диаграмме канал theta по умолчанию использует независимые шкалы, чтобы доли в каждой панели можно было сравнивать: