Граф

Компонент Граф отображает и динамически обновляет граф любого типа. Например, граф топологии сети.

На следующем рисунке показана топология сети, отображаемая в виде графа.

Графы, отображаемые компонентом Граф, состоят из узлов и ребер. Узлы - это вершины графа. Грани - это соединения между узлами. Например, в графе топологии сети узлами являются хосты, а ребрами - связи между ними.

Два узла могут иметь более одного ребра, соединяющего их. В этом случае ребро берет начало в некотором интерфейсе первого узла и соединяется с другим интерфейсом второго узла.

Фоном отображаемого графа является холст.

Каждый узел графа имеет базовый объект. Это означает, что каждый отображаемый узел представляет собой некоторый контекст. Вы можете получить доступ к этим базовым объектам с помощью действий с графом, описанных ниже. Например, узлы топологии сети могут представлять сетевые устройства.

Цвет узла графа указывает на состояние его базовых объектов.

Пример: На графе сетевой топологии зеленый узел означает, что сетевое устройство находится в режиме онлайн и не имеет проблем. Красные узлы - это автономные устройства и устройства с проблемами.

Каждый узел графа имеет метку, которая описывает его базовый объект. Метки узлов задаются в свойстве Выражение описания узла.

Пример: На карте топологии сети метки узлов отображают описания контекстов устройств.

Ширина ребер графа может варьироваться в зависимости от типа базового объекта.

Пример: На карте топологии сети узкие ребра представляют собой низкоскоростные соединения (например, 100 Мбит/с). Широкие ребра представляют высокоскоростные соединения (например, Gigabit Ethernet).

Цвет граней указывает на состояние соединений между узлами.

Пример: На карте топологии сети каждое ребро может иметь разные цвета на своих противоположных сторонах. Зеленая сторона грани указывает на то, что сетевой интерфейс, соответствующий этой ссылке, работает в режиме онлайн. Красная сторона грани указывает на нерабочий интерфейс.

Чтобы выполнить желаемое действие, можно дважды щелкнуть мышью по узлу графа. Например, можно открыть инструментальные панели устройств, соответствующих узлам графа.

Если Выражение имени предпочитаемого действия не указано, будет запущено действие по умолчанию контекста.

Щелчок правой кнопкой мыши по элементу графа вызывает меню действий для него.

Для узлов открывается меню, определенное свойством Всплывающее меню вершин. Для ребер открывается меню, определенное свойством Всплывающее меню связей.

Граф можно переместить, нажав на определенную точку и сбросив ее в другой точке карты. Это cоответственно переместит центр графа.

Перенос работает только тогда, когда граф находится в режиме Трансформация.

Если граф находится в режиме Выбор, можно кликнуть мышью по узлу с одновременным нажатием клавиши "Ctrl", чтобы центрировать граф на этом узле.

Колесиком мыши можно приближать и отдалять текущее местоположение мыши.

Щелчок мышью с одновременным нажатием клавиши "Shift" в окне графа позволяет вращать граф.

Щелчок мышью с одновременным нажатием клавиши "Control" в окне графа позволяет поворачивать граф.

Вращение и поворот возможны только если граф находится в режиме Трансформация.

Если граф находится в режиме Выбор, ее узлы могут выбираться и перемещаться путем перетаскивания мышью.

Можно выбрать несколько узлов:

• Щелкнув за пределами любого узла и перетащив мышь, чтобы выделить определенную область графа, включающую несколько узлов.

• Щелчком по нескольким узлам с нажатой клавишей Shift.

Чтобы создать новую связь, выделите группу узлов в режиме Выбор. Щелкните правой кнопкой мыши на одном из них. Наведите курсор на "Создать ненаправленную связь" и выберите новую связь.

Чтобы удалить ребро, создайте действие с именем deleteEdge во Всплывающем меню связей. Затем кликните правой кнопкой мыши на ребро (связь) выберите опцию удаления.

Чтобы удалить узел, создайте действие с именем deleteVertex во Всплывающем меню вершин. Затем кликните правой кнопкой мыши на узел и выберите опцию удаления.

Схемы расположение диаграммы определяются позицией их узлов.

Компонент Граф может сохранять текущую компоновку в базе данных AggreGate Server без вмешательства пользователя. Сохранение текущей компоновки является прозрачной операцией. Если пользователь открывает инструментальную панель или виджет с компонентом Граф, его расположение восстанавливается из базы данных в зависимости от провайдера топологии и типа компоновки графа. Если виджет или инструментальная панель с компонентом Граф закрывается, измененные узлы графа сохраняются в базе данных. Проконтролировать сохранение и восстановление можно при помощи меню контекста компонента, которое открывается при нажатии правой кнопкой мыши:

Для восстановления ранее сохраненного расположения, нажмите правой кнопкой мыши на холст и выберите "Восстановить расположение". Затем выберите компоновку для восстановления.

Для сохранения расположения нажмите правой кнопкой мыши на холст и выберите "Сохранить расположение". После этого выберите компоновку для перезаписи или выберите "Создать новое расположение" и введите новое имя расположения. Этот функционал можно отключить при помощи свойства Только чтение.

Для удаления расположения нажмите правой кнопкой мыши на холст и выберите "Удалить расположение". После этого выберите компоновки для удаления, проставив галочки в соответствующих им полях. Этот функционал можно отключить при помощи свойства Только чтение.

Граф имеет следующие основные свойства, общие для всех виджетов:

Видимый, Фон, Рамка, Шрифт, Курсор, Точки прикрепления, Всплывающее меню.

Граф наследует следующие базовые свойства Визуализации топологии:

Выражение имени предпочитаемого действия, Всплывающее меню вершин, Всплывающее меню связей, Только чтение.

Режимы графа: Трансформация, Выбор или Редактирование. В режиме Трансформации можно менять масштаб графа, перемещать, вращать и поворачивать. В режиме Выборы узлы графа можно перемещать по отдельности. В режиме Редактирование можно создавать связи между узлами.

Можно поменять режим графа, используя привязку, например, добавить к виджету выбор режима через Поле со списком.

Имя свойства: mode

Тип свойства: Целое число

Период обновления графа. Этот период используется для повторного считывания информации о топологии с сервера и обновления графа.

Имя свойства: updatePeriod

Тип свойства: Long

Определяет визуальный вид ребер графа. Возможны следующие варианты:

1. Линия	2. Клин
3. Четырехгранная кривая	4. Кубическая кривая.

Имя свойства: edgeShape

Тип свойства: Integer

У графа есть следующие свойства размера и положения, общие для всех виджетов:

Ширина, Высота.

В зависимости от выбранного позиционирования виджета, граф может использовать ограничения либо абсолютного позиционирования, либо сетки.

Граф использует свойство Привязки, общее для всех виджетов.

Граф наследует следующие свойства от Визуализации топологии:

Провайдерr, Узлы являются контекстами, Показывать несвязанные узлы, Выражение топологии, Выражение узлов, Выражение связей, Выражение идентификаторов связей, Выражение идентификаторов узлов, Выражение источника, Выражение назначения, Выражение цвета, Выражение типа, Выражения для получения изображения, Выражение интерфейса, Выражение направленности, Выражение ширины, Выражение описания связи, Показывать описания связи, Выражение цвета связи, Показывать граничащие узлы, Выражение подсказки узла, Выражение подсказки связи, Выражение описания узла.

Маска контекстов. Данные о топологии получаются из этих контекстов. В большинстве случаев каждый контекст, соответствующий этой маске, будет отображаться как отдельный узел графа.

Имя свойства: vertexMask

Тип свойства: String

Граф наследует следующие свойства компоновки от Визуализации топологии:

Выражение азимута, Выражение размера маркера.

Тип компоновки графа. Поддерживаемые компоновки:

• Камада-Кавай

• Фрухтерман-Рейнгольд

• Круг

• Самоорганизующийся Мейера

• Дерево

• Круговая

• Радиальная

• Пользовательская

Древовидные, круговые и радиальные компоновки игнорируют первоначальную информацию направления связи. Для данных компоновок направление каждой связи устанавливается автоматически алгоритмом компоновки.

Имя свойства: layout

Тип свойства: Integer

Коэффициент притяжения для компоновки Фрухтермана-Рейнгольда.

Имя свойства: attraction

Тип свойства: Double

Коэффициент отталкивания для компоновки Фрухтермана-Рейнгольда.

Название свойства: repulsion

Тип свойства: Double

Флаг поправки на гравитацию, используется в компоновке Камада-Кавай.

Имя свойства: adjustForGravity

Тип свойства: Boolean

Множитель расстояния отсоединения для макета Kamada-Kawai.

Имя свойства: disconnectedDistanceMultiplier

Тип свойства: Double

Флаг обмена вершинами для компоновки Kamada-Kawai.

Имя свойства: exchangeVertices

Тип свойства: Boolean

Коэффициент длины для компоновки Камада-Кавай.

Имя свойства: lengthFactor

Тип свойства: Double

Определяет расстояние между узами (вершинами) по горизонтали.

Имя свойства: horizontalVertexSpacing

Тип свойства: Integer

Определяет расстояние между узами (вершинами) по вертикали.

Имя свойства: verticalVertexSpacing

Тип свойства: Integer

Фоновое изображение, которое отображается на холсте.

Имя свойства: backgroundImage

Тип свойства: Data Block

Фильтр узлов (вершин). Только те узлы, для которых данная строка указана в их метке, будут выделены на графе.

Имя свойства: filter

Тип свойства: String

Определяет направление стрелок для компоновок дерево, круговая и радиальная.

Имя свойства: revertEdges

Тип свойства: Boolean

Выражение, которое возвращает X-координату узла внутри Пользовательской раскладки.

Имя свойства: customLayoutNodeXExpression

Тип свойства: String

Выражение, которое возвращает Y-координату узла внутри Пользовательской раскладки.

Имя свойства: customLayoutNodeTExpression

Тип свойства: String

Выражение, используемое для определения ориентации изображения узла. Оно должно возвращать угол поворота в радианах.

Имя свойства: azimuthExpression

Тип свойства: String

Выражение, используемое для определения относительного размера изображения узла. Должно возвращать значения больше 1 для увеличения масштаба изображения, и значения меньше 1 для уменьшения масштаба изображения.

Имя свойства: ratioExpression

Тип свойства: String

Это свойство позволяет настраивать свойства CSS-стилей, наследованных в изображениях SVG в результате Выражения для получения изображения.

Каждая строка в таблице Пользовательские свойства изображения позволяет настраивать одно динамическое свойство CSS:

• Имя класса CSS. Имя класса CSS, используемого в SVG изображении узла.

• Свойство CSS. Имя свойства класса CSS, которое будет динамически вычисляться.

• Выражение значения свойства CSS. Выражение, которое должно возвращать строковое значение нового свойств

Компонент Граф предоставляет следующие пользовательские функции:

Переключает текущее расположение графа на заданный преднастроенный макет. Можно использовать эту функцию для отмены внесенных в расположение изменений, либо для загрузки пользовательских расположений.

Имя функции: restoreLayout

Сохраняет текущее расположение графа как макет расположения с указанным именем. Можно использовать эту функцию для создания пользовательских расположений.

Имя функции: saveLayout

Удаляет определенный макет расположения графа. Можно использовать эту функцию для удаления существующих пользовательских расположений.

Имя функции: deleteLayout

Возвращает список существующих макетов расположений.

Имя функции: getLayoutsNames

Эта функция не имеет входных параметров.

Выходной формат:

Возвращает расположение графа в виде таблицы с двумя подтаблицами: координаты точек и трансформации. Позднее эту таблицу можно использовать как аргумент функции Обновить расположение.

Имя функции: getLayout

Обновляет расположение графа новыми параметрами расположения.

Имя функции: updateLayout

Скрытие, Показ, Перемещение, Изменение размеров, Клик мыши, Нажатие кнопки мыши, Отпускание кнопки мыши, Вход мыши, Выход мыши, Перемещение мыши, Вращение колесика мыши, Печать клавиши, Нажатие клавиши, Отпускание клавиши, Получение фокуса, Потеря фокуса

Это событие возникает при нажатии на узел карты.

Имя события: nodeClicked

Поля события:

Это событие формируется, когда курсор мыши наведен на узел.

Имя события: nodeHover

Поля события:

Это событие формируется, когда курсор мыши отводится от узла на карте.

Имя события: nodeUnhover

Поля события:

Это событие формируется при нажатии на связь между двумя узлами.

Имя события: edgeClicked

Поля события:

Это событие формируется, когда указатель мыши расположен на связи между двумя узлами.

Имя события: edgeHover

Поля события:

Это событие формируется, когда курсор мыши отведен от связи между двумя узлами.  

Имя события: edgeUnhover

Поля события:

Это событие формируется, когда в режиме редактирования курсор мыши перетаскивается с одного узла на другой. 

Имя события: edgeCreate

Поля события:

Это специальное событие с дополнительными функциями генерируется при создании всплывающего меню deleteEdge.

Имя события: edgeDelete

Поля события:

Событие возникает при вызове контекстного меню кликом правой кнопки мыши на узел.

Имя события: nodeShowPopup

Поля события:

Событие возникает при вызове контекстного меню связи кликом правой кнопки мыши на связь между двумя узлами.

Имя события: edgeShowPopup

Поля события:

Событие возникает при вызове контекстного меню графа кликом правой кнопки мыши на его холст.

Имя события: graphShowPopup

Событие не имеет полей.

Was this page helpful?

Tell us more

Send

Thank you!