Graphviz — различия между версиями
MisterChe (обсуждение | вклад) (→Многосекционный узлы) |
|||
Строка 156: | Строка 156: | ||
} | } | ||
</graph> | </graph> | ||
+ | |||
+ | |||
+ | |||
+ | <graphviz> | ||
+ | digraph G { | ||
+ | size ="7,180"; /*ШИРИНА И ВЫСОТА В ДЮЙМАХ:)*/ | ||
+ | node [shape=box]; /*ЗАДАЕМ ДЕФОЛТОВУЮ ФОРМУ ДЛЯ КОНТЕЙНЕРОВ*/ | ||
+ | |||
+ | /*ОПИСЫВАЕМ КОНСТАНТЫ*/ | ||
+ | a [shape=ellipse] [label="Начало"] | ||
+ | b [shape=diamond] [label="Пользователь совершил прямой заход\nили перешел с officemag-vip.ru"] | ||
+ | c [shape=diamond] [label="В ссылке \"Куда пришел\"\n(в детальной информации о хите)\n содержится метка\nutm_source=yandex.direct&utm_medium=cpc \nили\nutm_source=google&utm_medium=cpc"] | ||
+ | d [shape=diamond] [label="Ключевое слово включено\nв список исключений"] | ||
+ | e [shape=diamond] [label="Ссылка \"Откуда пришел\"\n(в детальной информации о хите)\nсоответствует условиям попадания\nв канал привлечения SEO"] | ||
+ | o [shape=diamond] [label="Поисковый запрос\n определен"] | ||
+ | k [shape=diamond] [label="Ссылка \"Откуда пришел\"\n начинается с\n http://yandex.ru/yandsearch?text="] | ||
+ | p [shape=diamond] [label="Адрес страницы,\n на которую пришел пользователь\n содержит в адресе /catalog/,\n но не является страницей\n http://www.officemag.ru/catalog/"] | ||
+ | q [shape=hexagon, style=filled, color=lightblue] [label="Отсылка в Google Analytics\n адреса страницы,\n на которую пришел пользователь "] | ||
+ | f [shape=hexagon, style=filled, color=lightblue] [label="канал привлечения\n\"CPC\""] | ||
+ | g [shape=hexagon, style=filled, color=lightblue] [label="канал привлечения\n\"SEO\""] | ||
+ | h [shape=hexagon, style=filled, color=lightblue] [label="канал привлечения\n\"Другое\""] | ||
+ | j [shape=hexagon, style=filled, color=lightblue] [label="не менять\nканал привлечения"] | ||
+ | |||
+ | /*УСТАНАВЛИВАЕМ СВЯЗИ МЕЖДУ КОНСТАНТАМИ*/ | ||
+ | a -> b | ||
+ | b -> j [label="Да"] | ||
+ | b -> c [label="Нет"] | ||
+ | c -> f [label="Да"] | ||
+ | c -> d [label="Нет"] | ||
+ | d -> j [label="Да"] | ||
+ | d -> e [label="Нет"] | ||
+ | e -> k [label="Да"] | ||
+ | e -> h [label="Нет"] | ||
+ | k -> o [label="Нет"] | ||
+ | k -> j [label="Да"] | ||
+ | o -> g [label="Да"] | ||
+ | o -> p [label="Нет"] | ||
+ | p -> g [label="Да"] | ||
+ | p -> j [label="Нет"] | ||
+ | g -> q | ||
+ | } | ||
== Гиперссылки на графах == | == Гиперссылки на графах == |
Версия 09:05, 24 октября 2014
Graphviz — это разработанный специалистами лаборатории AT&T пакет утилит по автоматической визуализации графов, заданных в виде текстового описания. Пакет распространяется с открытыми исходными файлами и работает на всех операционных системах, включая Windows, Linux/Unix, Mac OS. Самой интересной программой пакета является «dot», автоматический визуализатор направленных графов, который принимает на вход текстовый файл со структурой графа, а на выходе формирует граф в виде графического, векторного или текстового файла.
Быстрый старт
Входной файл для программы «DOT» является обычным текстовым файлом на специальном языке разметки графа. Структура файла очень простая, например,
<graph> digraph G{ Рождение->Юность->Зрелость->Старость->Смерть; Юность->Смерть; Зрелость->Смерть; } </graph>
на выходе будет
Программа «Dot» сама распознает все связи графа и упорядочит его таким образом, чтобы было наименьшее количество пересечений.
Чтобы использовать «dot»-графы в CustisWiki, используйте следующий синтаксис:
<graph> digraph G{ Рождение->Юность->Зрелость->Старость->Смерть; Юность->Смерть; Зрелость->Смерть; } </graph>
Если у вас узлы поименованы словосочетаниями, заключите их в кавычки, т. е.
<graph> digraph G{ "Полет фантазии"->"Расход горючего"; } </graph>
Поздравляем! Теперь вы способны рисовать графы в CustisWiki. Остальной текст будет посвящен некоторым тонкостям использования Graphviz.
Внешний вид графа
«Dot» позволяет изменять внешний вид графа. Например, можно изменять форму фигур (прямоугольники, овалы, круги, параллелограммы, многоугольники), цвет и шрифт текста, цвет фона фигур, стиль стрелок и рамок фигур, подписи стрелок и т. д. Итак, основные объектами являются узлы («node») и ребра («edge»). Для того, чтобы настроить свойства всех узлов или ребер нужно вначале использовать команды
node[свойство1="значение1",свойство2="значение2",...] edge[свойство1="значение1",свойство2="значение2",...]
Также (в квадратных скобках после описания объекта) можно изменять настройки конкретного узла или ребра. Параметры графа, просто задаются в виде параметр=значение. Полезно запомнить параметр «rankdir», он может быть «TB» (top->bottom, параметр по умолчанию), или «LR» (left->right), и определяет, сверху-вниз, или справа-налево, нужно располагать узлы графа. Вот пестрый пример:
digraph G{ rankdir=LR; node[color="red",fontsize=14]; edge[color="darkgreen",fontcolor="blue",fontsize=12]; OPEN[shape="rectangle",style="filled",fillcolor="lightgrey"]; CLOSED[shape="octagon",label="Финиш"]; VERIFIED[shape="rectangle",style="rounded"]; OPEN->RESOLVED->VERIFIED->CLOSED; OPEN->CLOSED[style="bold"]; VERIFIED->OPEN[label="обнаружены ошибки",style="dashed",arrowhead="dot"]; }
на выходе будет
Если предполагается, что граф будут не только просматривать через IE, но и печатать, то необходимо установить ширину картинки, иначе при печати картинка будет обрезана. Для этого следует задать внутри описания
size="6.7,15";
Существенна только первая цифра. Число 6.7 подобрано эмпирически, оно обеспечивает печать полной картинки при настройках IE по умолчанию.
Уровни в графах
В «Dot» присутствует возможность связать узлы графа не только стрелками, но и уровнями отображения, что позволяет создавать шкалу и располагать узлы графа соответственно данной шкале. Для связывания используется следующая конструкция:
{ rank = same; "элемент уровня"; "элемент для привязки 1"; "элемент для привязки 2"; ..}
Например, при использовании следующей конструкции:
<graph> digraph G{ node[fontsize=9]; { /* шкала месяцев*/ node[shape=plaintext]; /* что бы не было видно рамок */ edge[color=white] /* что бы не было видно стрелок */ "март" -> "июнь" -> "сентябрь" -> "декабрь"; } { rank = same; "март"; "весна"; "a"; } { rank = same; "июнь"; "лето";} { rank = same; "сентябрь"; "осень"; "d"; } { rank = same; "декабрь"; "зима"; "e"} "весна" -> "лето" -> "осень" -> "зима" -> "весна" "a" -> "b" -> "c" -> "d" -> "e" ; } </graph>
на выходе получается:
Многосекционный узлы
Dot позволяет создавать многосекционные узлы при это каждая секция может быть поименована, и тогда ребра можно продоводить между секциями и узлами.
Для включения режима многосекционности устанавливается атрибут узла shape.
shape=record;
Секции описываются в атрибуте label узла, с помощью разделителя «|». Для именования секции ее имя указывается в <>. При описание ребра, исходящего или входящего в секцию, секция именуется следующим образом:
элемент:<имя_секции>
Например, из такого описания:
digraph structs { rankdir=HR; first [shape=record,label=" x1\n all | { x21 | <f0> x22| x23} | x3" ]; second [shape=record,label=" x22_1 | x22_2 | x22_3"]; first:<f0> -> second; }
Получается следующее: