Текст (text)
Примитивы text позволяют добавлять пояснения к данным, а также подписи и заголовки осей и легенд.
Пример
Свойства примитива text
| Свойство | Тип | Описание |
|---|---|---|
| align | String | Выравнивание текста по горизонтали: left (по умолчанию), center или right. |
| angle | Number | Угол поворота текста в градусах (по умолчанию 0). |
| baseline | String | Вертикальное положение базовой линии текста: alphabetic (по умолчанию), top, middle, bottom, line-top или line-bottom. Значения line-top и line-bottom ≥ 5.10 похожи на top и bottom, но рассчитываются относительно lineHeight, а не только fontSize. |
| dir | String | Направление текста: ltr (слева направо, по умолчанию) или rtl (справа налево). От него зависит, с какой стороны текст обрезается при ограничении limit. |
| dx | Number | Горизонтальное смещение текста относительно опорной точки в пикселях, до поворота. |
| dy | Number | Вертикальное смещение текста относительно опорной точки в пикселях, до поворота. |
| ellipsis | String | Строка многоточия при обрезке текста по limit (по умолчанию «…»). |
| font | String | Гарнитура шрифта, например Helvetica Neue. |
| fontSize | Number | Размер шрифта в пикселях. |
| fontWeight | String | Number | Насыщенность шрифта, например normal или bold. |
| fontStyle | String | Начертание шрифта, например normal или italic. |
| lineBreak | String | Разделитель, например символ новой строки, по которому текст разбивается на несколько строк. Игнорируется, если свойство text задано массивом. ≥ 5.7 |
| lineHeight | Number | Высота каждой строки многострочного текста в пикселях; используется также при базовой линии "line-top" или "line-bottom". ≥ 5.7 |
| limit | Number | Максимальная длина текста в пикселях (по умолчанию 0, без ограничения). Если отображаемый текст длиннее, значение text автоматически обрезается. |
| radius | Number | Радиальное смещение в полярных координатах относительно начала, заданного свойствами x и y, в пикселях (по умолчанию 0). |
| text | String | String[ ] | Отображаемый текст. Он может обрезаться, если длина превышает limit. Начиная с версии ≥ 5.7 массив строк задаёт многострочный текст. Начиная с версии ≥ 5.10 пробелы по краям каждой строки удаляются перед отрисовкой. |
| theta | Number | Угол полярных координат в радианах относительно начала, заданного свойствами x и y (по умолчанию 0). Как и у примитива arc, значение 0 соответствует направлению вверх («север»). |
Свойства x и y задают опорную точку текста. Дополнительные параметры положения — dx, dy, radius и theta — отсчитываются от неё.
Общие свойства примитивов
| Свойство | Тип | Описание |
|---|---|---|
| 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. |