120px-XXV+.jpg Helpwiki.jpg Gosuslugi.jpg Vystavka.jpg Использование интерактивной доски Panaboard LogoRobo2-120.jpg

ПскоВики переехала на новую площадку
Некоторые гиперссылки, созданные ранее, могут не работать, так как URL- адрес изменился на http://wiki1.pskovedu.ru

ПскоВики:Графвиз

Материал из ПскоВики — сайта педагогического сообщества Псковской области

Перейти к: навигация, поиск

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

Для использования Графвиз требуется использовать примитивный язык описания графов dgl. Основные понятия:

  • граф,
  • вершина графа -- элемент множества,
  • ребро графа, соединяющее вершину N с вершиной M

Содержание

Простейший граф

<graphviz>digraph G {rankdir=LR ;Привет -> Читатель ;}</graphviz>

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


Error writing graphviz file to disk.

Свойства графа

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

  • Направленность графа:
    • rankdir=LR - слева-направо
    • rankdir=TB - сверху вниз
    • ratio=auto - отношение = авто;
  • Цвет фона графа - graph [bgcolor=Snow2] - окрашивает фон в цвет - "серый снег"
  • Свойства (node)узлов - node[color="Pink",fontsize=10, style=filled, fontcolor="blue", shape="none"] (Сочетание двух и более слов записывается в кавычки - "Нижний Новгород")
    • color="Pink" - цвет = розовый (Таблице цветов)
    • fontsize=8 - размер шрифта = 8
    • style=filled - стиль = заполненный (без неё узел прозрачен)
    • fontcolor="blue" - цвет шрифта = голубой
    • shape="none" - форма = "без формы"
      • Формы узла [shape=?] - invtriangle - треугольник вершиной вниз; box - прямоугольник; ellipse - эллипс; invtrapezium - перевёрнутая трапеция; triangle - треугольник; trapezium - трапеция; record -  ; doubleoctagon - двойной восьмиугольник ; octagon - восьмиугольник; tripleoctagon - тройной восьмиугольник (Все формы)
    • Ярославль [shape=Mdiamond] - узлу Ярославль придаётся форма ромба(алмаз)
    • Сызрань [shape=Msquare] - узлу Сызрань придаётся форма квадрата
    • Кострома [shape=circle] - узлу Кострома придаётся форма круга
    • "Нижний Новгород" [shape=doublecircle] - узлу "Нижний Новгород" придаётся форма двойного круга
    • Казань [shape=hexagon,color=green] - узлу Казань придаётся форма шестиугольника и зелёный цвет
  • Управление положением узлов - {rank=same; Елабуга Дзержинск Сызрань ;} - узлам Елабуга, Дзержинск, Сызрань предан разряд = тот же самый; ranksep=3 - расстояние между разрядами;
  • Свойства(edge)ребер - edge[color="blue",fontcolor="Green",fontsize=12]
    • color="Brown" - цвет = коричневый
      • color="Green:blue:red" - трёхцветие (возможно любое количество)
    • dir=both - направление стрелки в две стороны
    • fontsize=8 - размер шрифта = 8
    • fontcolor="blue" - цвет шрифта = зелёный
    • style=dotted - стиль = пунктирная линия
    • arrowhead="dot" - голова стрелки = "точка", "none" - нет (Все формы)
  • Ярлык ребра [label="Волга"] - все связи Ярославль -> ... -> Сызрань будут помечены меткой Волга.


<graphviz>
 digraph G{
 graph [bgcolor=Snow2];
 rankdir=LR ; // направление графа слева направо
 node[color="Pink",fontsize=8, fontcolor="blue",style=filled, shape="none"] ;
 edge[color="Brown",fontcolor="Green",fontsize=8] ;
 Ярославль -> Кострома -> "Нижний Новгород" -> Казань -> Сызрань [dir=both, label="Волга"];
 "Нижний Новгород" -> Дзержинск [style=dotted, label="Ока",arrowhead="dot" ] ;
 Казань -> Елабуга [label="Кама", color="Green:blue:red"] ;
 Ярославль [shape=Mdiamond], Сызрань [shape=Msquare], Кострома [shape=circle];
 "Нижний Новгород" [shape = doublecircle],Казань[shape=hexagon,color=green]
 {rank=same; Елабуга Дзержинск Сызрань ;}
 }
 </graphviz>

Error writing graphviz file to disk.

Гипертекстовые ссылки на страницы

Ссылки на внутренние страницы устанавливаются прямым связыванием:

  • ПскоВики - [URL=ПскоВики]

Кроме того, мы можем в начале графа указать, что все элементы поименованные в графе должны ссылаться на страницы с соответстующим названием. node [URL="/index.php/\N"] ;

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

Для того, чтобы имя заметки на ребре так же становилось ссылкой на страницу, необходимо дополнить метку ссылкой [label="ПскоВики", URL="ПскоВики"]. В графе, который представлен ниже все узлы и метки являются гиперссылками.

<graphviz>
 digraph G{
 rankdir=LR ;
 node[color="Green",fontsize=9, fontcolor="blue"] ;
 edge[color="Green",fontcolor="blue",fontsize=8] ;
 node [URL="/index.php/\N"] ;
 Категории -> "Категория:Тьюторы" -> "Категория:Участник" ->  "Категория:Учитель"  [label="ПскоВики",URL="ПскоВики"] ;
 }
 </graphviz>


Error writing graphviz file to disk.

Ссылки на внешние источники устанавливаются прямым связыванием с адресом web-сайта:

<graphviz>
 digraph G{
 rankdir=LR ;
 node[color="red",fontsize=9, fontcolor="blue", shape="none"] ;
 edge[color="red",fontcolor="blue",fontsize=8] ;
 node [URL="/index.php/\N"] ;
 Тест -> Проект [style=dotted, label="ПскоВики", URL="http://wiki.pskovedu.ru/index.php/  Заглавная_страница"] ;
 }
 </graphviz>
 

Error writing graphviz file to disk.


Использование групп подграфа

В структуре графа можно образовать несколько групп использую дополнение - subgraph cluster_0 {}

<graphviz> digraph G {
 subgraph cluster0 {
  style=filled;
  color=DeepSkyBlue;
  node [style=filled,color=white];
  "Учебные проекты" -> "Сообщество школ" -> "Сетевые проекты" -> "Участники сообщества";
  label = "Летопись.ру";
  }
 subgraph cluster1 {
  node [style=filled];
  Проекты -> школы -> тьюторы -> учителя;
  label = "ПскоВики";
  color=blue
  "Учебные проекты" -> Проекты
  учителя -> "Участники сообщества"
  Проекты -> "Сетевые проекты"
        }
	}</graphviz>

Error writing graphviz file to disk.


Сложный граф

Пример графа с использование подписи, многоугольных узлов неправильной формы и разнонаправленный.

<graphviz> digraph G {
 graph [	//подпись под графом
   fontsize = 26,//размер шрифта
   label = "Сложный граф",
		size = "8,8" ];//размер графа
	node [	shape = polygon,//форма = многоугольник
		sides = 4,// сторон = 4
		distortion = "0.0",//искажение = "0.0"
		orientation = "0.0",//ориентация = "0.0"
		skew = "0.0",//уклон "0.0"
		color = white,//цвет = белый
		style = filled,//стиль = заполненный
		fontname = "Helvetica-Outline" ];//Название(имя) шрифта = "Helvetica-Outline"
 // формирование узлов графа
 "Псковская область" [sides=9, distortion="0.936354", orientation=28, skew="-0.126818", color=salmon2];
 "Города" [sides=5, distortion="0.238792", orientation=11, skew="0.995935", color=deepskyblue];
 "Районы" [sides=8, distortion="0.019636", orientation=79, skew="-0.440424", color=goldenrod2];
 "Псков" [sides=7, distortion="0.265084", orientation=26, skew="0.403659", color=gold1];
 "Великие Луки" [distortion="0.039386", orientation=2, skew="-0.461120", color=greenyellow];
 Порхов [sides=5, distortion="0.228564", orientation=63, skew="-0.062846", color=darkseagreen];
 Невель [distortion="0.624013", orientation=56, skew="0.101396", color=dodgerblue1];
 "РЦДО" [sides=8, distortion="0.731383", orientation=43, skew="-0.824612", color=thistle2];
 "РРЦ" [sides=6, distortion="0.592100", orientation=34, skew="-0.719269", color=darkolivegreen3];
 "Великолукский" [sides=7, distortion="0.640971", orientation=84, skew="-0.768455", color=cyan];
 "Псковский" [distortion="0.758942", orientation=42, skew="0.039886", color=blue];
	"Псковская область" -> "Города"[color=red];//формирование направлений графа
	"Псковская область" -> "Районы"[color=red];//цвет ребра = красный
	"Города" -> "Псков"[color=green];
	"Города" -> "Великие Луки"[color=green];
	"Города" -> Порхов[color=green];
	"Города" -> Невель[color=green];
	Невель -> РРЦ;
	Порхов -> РРЦ;
        Великолукский -> РРЦ;
        Псковский -> РРЦ;
        РРЦ -> РЦДО
	"Великие Луки" -> РЦДО;
	Псков -> РЦДО;
	"Районы" -> "Великолукский";
	"Районы" -> "Псковский";
	}</graphviz>

Error writing graphviz file to disk.


При написании этой статьи использовался материал из Проекта Летопись.ru.

Личные инструменты
Site Statistics