Область (area)
Примитивы area — закрашенные области с горизонтальной или вертикальной ориентацией. Их часто используют для отображения изменений во времени: одной областью или несколькими областями с накоплением. Области также могут показывать диапазон значений (минимум и максимум) или неопределённость во времени.
Пример
Свойства примитива area
| Свойство | Тип | Описание |
|---|---|---|
| orient | String | Ориентация области: horizontal или vertical (по умолчанию). Для вертикальной области задаются x, y и (y2 или height); для горизонтальной — y, x и (x2 или width). |
| interpolate | String | Способ интерполяции: basis, cardinal, catmull-rom, linear, monotone, natural, step, step-after или step-before. По умолчанию linear. |
| tension | Number | Параметр натяжения в диапазоне [0, 1] для интерполяции cardinal (по умолчанию 0) или catmull-rom (по умолчанию 0,5). |
| defined | Boolean | Логический признак наличия текущей точки данных. При false соответствующий участок области пропускается, образуя разрыв. |
Общие свойства примитивов
| Свойство | Тип | Описание |
|---|---|---|
| x | Number | Основная координата x в пикселях. |
| x2 | Number | Дополнительная координата x в пикселях. |
| xc | Number | Координата центра по x. Несовместима с x и x2. |
| width | Number | Ширина примитива в пикселях, если поддерживается. |
| y | Number | Основная координата y в пикселях. |
| y2 | Number | Дополнительная координата y в пикселях. |
| yc | Number | Координата центра по y. Несовместима с y и y2. |
| height | Number | Высота примитива в пикселях, если поддерживается. |
| opacity | Number | Непрозрачность примитива от 0 (прозрачный) до 1 (непрозрачный). |
| fill | Color | Цвет заливки. |
| fillOpacity | Number | Непрозрачность заливки от 0 до 1. |
| stroke | Color | Цвет обводки. |
| strokeOpacity | Number | Непрозрачность обводки от 0 до 1. |
| strokeWidth | Number | Толщина обводки в пикселях. |
| strokeCap | String | Вид конца линии: butt (по умолчанию), round или square. |
| strokeDash | Number[ ] | Массив длин штрихов и промежутков для пунктирной или точечной линии. |
| strokeDashOffset | Number | Смещение начала штрихового узора в пикселях. |
| strokeJoin | String | Вид соединения сегментов обводки: miter (по умолчанию), round или bevel. |
| strokeMiterLimit | Number | Предел заострения соединения, после которого оно срезается. |
| blend | String | Режим смешивания цвета примитива с фоном. Допускается любое значение CSS mix-blend-mode, кроме "normal". Значение по умолчанию null соответствует режиму normal для SVG и source-over для Canvas. |
| cursor | String | Вид указателя мыши над примитивом. Допускается любое корректное значение CSS cursor. |
| href | URL | Адрес, открываемый при щелчке. Если задан, примитив действует как гиперссылка. |
| tooltip | Any | Текст подсказки при наведении. Если значение — объект (кроме Date или массива), каждая пара «ключ — значение» показывается на отдельной строке, например "key1: value1\nkey2: value2". Массивы показываются в квадратных скобках [value1, value2, ...]. Остальные значения преобразуются в строки. Вложенные объекты не раскрываются рекурсивно. |
| zindex | Number | Целое число, задающее порядок наложения соседних экземпляров примитива. По умолчанию 0; элементы с большим значением рисуются поверх элементов с меньшим. При использовании в кодировании влияет только на порядок внутри одного набора и не меняет слой относительно других определений примитивов. В отличие от свойства sort на уровне определения примитива, zindex меняет только порядок отрисовки, но не порядок самих элементов, например точек линии или области. Обычно его используют, чтобы выделенный элемент рисовался поверх соседних. |
У примитивов, поддерживающих ширину и высоту (включая rect и area), горизонтальный размер определяется в таком порядке приоритета: свойствами x и x2, затем x и width, затем x2 и width, затем xc и width. Если указаны все три свойства — x, x2 и width, — значение width игнорируется. Свойства y, y2, yc и height обрабатываются аналогично.
Для примитивов без ширины или высоты (включая path и arc) применяются похожие вычисления, но они определяют только итоговое положение по x и y. Свойство width может повлиять на итоговую координату x, но само по себе не отображается.
Если для одного измерения используются несколько координатных свойств (x и x2 либо y и y2), их нужно задавать в одном наборе кодирования, например вместе в "enter": {...} или в "update": {...}. Разделение между наборами может привести к неожиданному результату.
Свойства доступности ≥ 5.11
Свойства доступности определяют атрибуты ARIA при выводе SVG. Vega автоматически создаёт атрибуты ARIA для элементов контейнера SVG <g> в каждом определении примитива; это настраивается через свойства доступности примитива. Приведённые ниже свойства задаются в наборах кодирования и добавляют атрибуты ARIA отдельным экземплярам.
| Свойство | Тип | Описание |
|---|---|---|
| aria | Boolean | Логический признак (по умолчанию true), определяющий, нужно ли добавлять атрибуты ARIA при выводе SVG. При false элемент SVG получает атрибут aria-hidden и исключается из дерева доступности. |
| description | String | Текстовое описание экземпляра примитива для ARIA (только при выводе SVG). Если задано, становится значением атрибута aria-label. |