Диаграмма SVG-объект
Представляет собой объект, реализованный на базе формата SVG, состоящий из областей. Примерами SVG-объектов могут быть не только карты с регионами, но и расстановки в помещениях, планы зданий, земельные участки и т.д.
Вкладка «Данные»
Кроме стандартных секций для данной визуализаций предусмотрены следующие:
Загрузить файл
С помощью кнопки "Файл" открывается просмотр устройства пользователя для выбора файла в качестве основы визуализации. Требуется готовый объект формата SVG, состоящий из областей, явно заданных координатами. Для достижения наилучшего результата в последующей работе с объектом рекомендуется использовать объекты, отвечающие следующим условиям:
- Каждый
<path>должен содержать уникальный идентификатор, лучший вариант – name, но будет достаточно наличия title или id (например, id автоматически присваивается при выгрузке объектов в формате SVG из Figma) - Не должно быть вложенных path (элемента SVG) внутри
<a>,<use>,<symbol> - Не используются
<clipPath>,<defs>,<mask>,<pattern>> - Без стилей через CSS или style
После загрузки корректного файла SVG-объект отобразится в контейнере. Если у объекта были указаны идентификаторы для областей, то с ними можно будет взаимодействать через интерфейс системы:
- Назначать данные из модели данных
- Устанавливать свойства заливки и текста в различных состояниях
- Проектировать переходы по ссылкам с помощью областей
Если у области нет уникального идентификатора (назовём такую область неинтерактивной), то она будет представлена на визуализации в статичном состоянии с одним выбранным цветом для всех таких элементов.
Изменения настроек коснулись следующих секций:
Разрезы
Число разрезов ограничено одним – можно привязать области к данным только по одному полю.
На виртуальных данных разрезы SVG-объекта заполняются автоматически после выбора файла с устройства – система распознаёт уникальные идентификаторы и записывает их в строку ввода. При необходимости можно изменить или удалить часть из них – тогда их области станут неинтерактивными.
При добавлении нового идентификатора в текстовую строку, а не сам файл, никаких изменений не произойдёт – необходимо редактировать исходный SVG-объект и заново подгружать его в систему
На реальных данных необходимо выбрать одно поле из модели, содержащее в себе названия областей, совпадающие с идентификаторами в SVG-объекте
В всплывающем окне настроек разрезов появились 2 новые функции:
- Вывести на карту – при включенном переключателе названия областей будут выведены на визуализации
- Показать значения в подсказке – при включенном переключателе при наведении на область во всплывающей подсказке будет отображаться её название
Показатели
Число показателей для SVG-объекта никак не ограничено, но только один показатель может быть основным – именно он может отображаться вместе с названиями областей в различных состояниях. Остальные может быть видно только при наведении на область в появившейся подсказке.
На виртуальных данных всё так же можно задавать диапазоны значений, в рамках которых будут генерироваться числа показателя для каждой интерактивной области.
На реальных данных можно выбирать неограниченное число полей, из которых будут подставляться значения.
В всплывающем окне настроек показателей также добавилось 2 новые секции:
- Сделать основным – позволяет использовать данный показатель для демонстрации на каждой из областей в любом состоянии. Переключатель "Вывести на карту" регулирует отображение основного показателя – при включенном переключателе показатель будет видно в тех состояниях, для которых разрешено его отображение (см. вкладку "Вид")
- Показать значения в подсказке – при включенном переключателе при наведении на область во всплывающей подсказке будет отображаться её значение (дополнительные показатели пишутся через точку с запятой)
Вкладка «Вид»
Кроме стандартных секций для данной визуализаций предусмотрены следующие:
Оформление областей
Состояние
Для SVG-объекта можно задать одно из следующих состояний:
- Свободное – отображение областей без наведения на них курсора мыши или выделения нажатием
- При наведении – отображение областей при наведении на них курсора мыши
- Выбрано – отображение областей после нажатия ЛКМ на них. Повторное нажатие снимает выбор с области и возвращает её в состояние "Свободное"
- Статичное – отображение всех неинтерактивных областей
Состояние "При наведении" активируется при наведении курсора как на свободные области, так и на выбранные
У состояния "Выбрано" также можно указать непрозрачность невыбранных областей – в таком случае все выбранные области получат заливку со 100% непрозрачностью, а свободные – с указанной в данном поле.
Отображение областей состоит из цвета заливки, свойств текста и обводки (за исключением состояния "Статичное" – для неинтерактивных областей можно указать только цвет заливки)
Рядом с состояниями находится кнопка "Применить ко всем состояниям" – она переносит все общие состояния из текущего на все остальные
К общим состояниям относятся свойства текста и обводка. Цвет заливки будет общим только у состояний "При наведении" и "Выбрано" (для них указывается ровно один цвет). Ни из состояния "Статичное", ни в это состояние нельзя применять свойства из других состояний.
Цвет заливки
Можно определить одним из 4 классических способов:
- Вручную
- По значению
- Правила
- SQL (язык структурированных запросов)
Для состояния "Статичное" можно указать только цвет вручную.
В состояниях "Свободное" и "Статичное" для цвета вручную указывается группа из палитры – цвета будут присваиваться областям по той очереди, по которой они определены в наборе данных (на реальных данных) или указаны в самом объекте (на виртуальных данных)
В состояниях "При наведении" и "Выбрано" для цвета вручную указывается ровно один цвет.
Свойства текста и обводка являются стандартными подсекциями со стандартными настройками. Единственным исключением является переключатель на свойствах текста – он срабатывает только для текущего состояния и отвечает за отображение текста на визуальном компоненте в этом состоянии (если переключатель выключен, то текст исчезает).
Вкладка «События»
Кроме стандартных секций для данной визуализаций предусмотрены следующие:
Переход
Секция с переключателем, которая отвечает за возможность перехода по ссылкам. Для перехода предусмотрены два возможных варианта: к объекту и по гиперссылке.
Объект
Под объектом понимается страница проекта. Возможны два режима:
- Общий – выбирается одна страница проекта. Переход инициируется нажатием на контейнер с визуализацией.
- Раздельный – для каждой области может быть выбрана страница проекта для перехода на неё. Области подставляются автоматически, а страницы для них назначаются вручную.
Гиперссылка
Гиперссылка может вести на любой указанный Интернет-ресурс – достаточно вставить в поле ввода нужную ссылку. Для гиперссылки появляются ещё 2 варианта:
- В том же окне – при переходе указанный ресурс заменяет собой проект в текущей вкладке браузера
- В новом окне – открывается новая вкладка браузера, в которой выполняется переход на указанный ресурс
Для гиперссылки также возможны 2 режима:
- Общий – записывается одна ссылка на ресурс. Переход инициируется нажатием на контейнер с визуализацией
- Раздельный – для каждой области может быть выбрана своя ссылка на ресурс для перехода на неё. Области подставляются автоматически, а ссылки для них назначаются вручную.
