Рисование ориентированного графа

@wingblack · Регистрация: 09.04.2013

Студворк — интернет-сервис помощи студентам

Я, как нуб, ищу простой способ нарисовать граф с парой доп условий:
- ноды должны содержать текст (порой до 60 символов, можно разбить на несколько строк)
- имеется два типа связей и нод, желательно и то и другое выделить, например цветом
- именно ор-граф не обязательно, но желательно

Просмотрел много разных движков, останавливался на 2-х как выглядевших наиболее простыми:
1) https://github.com/anvaka/VivaGraphJS
Научился вставлять текст вместо нод и делать его цветным, но не получилось разобраться с цветными линиями, да и с рисованием стрелки засада. К тому же как-то нужно добавить непрозрачный фон для текста, ибо линия связи перечеркивает текст
2) http://arborjs.org/halfviz/
Из коробки можно сделать и ор граф, и раскрасить ноды и линии, в принципе то что нужно, но... Но отсутствуют примеры как отдельные страницы. Автоматический парсинг текста в демках это конечно классно, но не добавляет понимания как с этим работать (по крайней мере для нуба в JS и SVG). Остановился на попытках растянуть canvas на весь экран - лучшее что получалось выглядело как растягивание мелкой картинки до нужных произвольных размеров вместо расширение области вывода c сохранением размеров текста и линий.

@Padimanskas · 16.11.2013, 05:09

Вот, держите пример. Но это уже будет целая задача(подумал я, когда собирался реализовывать Drag&Drop для узлов и сбоку в модуль плагина

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE HTML>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>Nodes</title>
    <style>
        #canvas {
            display:block;
            margin:auto;
            width:640px;
            height:480px;
            background-color:#C4C4C4;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d');
        canvas.width = 640;
        canvas.height = 480;
        
        
var nodes = [
            {id : 1, x : 325, y : 100, text : 'node1', childs : [2, 3, 4, 5]},
            {id : 2, x : 250, y : 200, text : 'node2', childs : [11, 12]},
            {id : 3, x : 300, y : 200, text : 'node3'},
            {id : 4, x : 350, y : 200, text : 'node4'},
            {id : 5, x : 400, y : 200, text : 'node5', childs : [6,7,8,9,10]},
            {id : 6, x : 300, y : 300, text : 'node6'},
            {id : 7, x : 350, y : 300, text : 'node7'},
            {id : 8, x : 400, y : 300, text : 'node8'},
            {id : 9, x : 450, y : 300, text : 'node9'},
            {id : 10, x : 500, y : 300, text : 'node10'},
            {id : 11, x : 200, y : 300, text : 'node11'},
            {id : 12, x : 250, y : 300, text : 'node12'},
];
 
 
nodes.forEach(function(node){
    createNodes(node, nodes);
}); 
 
function createNodes(params, nodes){
 
if(params.childs && params.childs.length){
    params.childs.forEach(function(id){
        if(params.id != id){
            var child = getNodeById({id : id, nodes : nodes});
            context.fillText(params.text, params.x, params.y);
            context.fillText(child.text, child.x, child.y);
            context.beginPath();
            context.moveTo(params.x, params.y);
            context.lineTo(child.x, child.y);
            context.stroke();
        }
    });
}
} 
 
function getNodeById(params){
    var result;
    params.nodes.forEach(function(node){
        if(node.id == params.id){
            result = node;
        }
    });
    return result;
}
        
        
    </script>
</body>
</html>

@wingblack · 16.11.2013, 14:05 **[ТС]**

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

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

http://visjs.org/#gallery

Думаю, так как тут есть все примеры которые меня интересуют, я смогу сделать что-то удобоваримое.

@Padimanskas · 29.11.2013, 22:44

Сообщение от wingblack

Спасибо, конечно, за старания

Да пустяки

Сообщение от wingblack

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

В приведенном коде можно реализовать все вышеперечисленное

Сообщение от wingblack

Думаю, так как тут есть все примеры которые меня интересуют, я смогу сделать что-то удобоваримое.

Удобоваримое делается не с помощью visjs истязания html элементов, а по средствам SVG графики

@wingblack · 30.11.2013, 13:16 **[ТС]**

Сообщение от Padimanskas

Да пустяки

В приведенном коде можно реализовать все вышеперечисленное

Удобоваримое делается не с помощью visjs истязания html элементов, а по средствам SVG графики

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

вот пример что у меня получилось сделать на visjs

Это картинка большей части графа (совсем чуточку не поместилось) по всей имеющейся информации.
Можно сделать более короткие подписи и раскрасить, но все равно трудночитаемо. А в представленном примере, предполагаю, прочитать его будет еще труднее.

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

В плюсе имею немного более подробные знания по предмету, включая SVG, на описание которого автор VivaGraph столь любезно дал ссылку в примерах.

Добавлено через 11 минут
Update:
да, данный граф не статичный, а автоматически пытается распределить ноды в пространстве, может движок (да и JS) не очень рассчитан на такой большой объем (по-мойму порядка 2000 связей), но на отрисовку такого графа полностью сьедается одно ядро на 4ГГц, и получается слайдшоу.

@Padimanskas · 04.12.2013, 09:20

Сообщение от wingblack

может движок (да и JS) не очень рассчитан на такой большой объем

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

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Вывод текста со шрифтом TTF с помощью библиотеки SDL3_ttf на Си и C++ 8Observer8 24.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-text-sdl3-c. zip finish-text-sdl3-cpp. zip	Жизнь в неопределённости kumehtar 23.03.2026 Жизнь — это постоянное существование в неопределённости. Например, даже если у тебя есть список дел, невозможно дойти до точки, где всё окончательно завершено и больше ничего не осталось. В принципе,. . .	Модель здравоСохранения: работники работают быстрее после её введения. anaschu 23.03.2026 geJalZw1fLo Корпорация до введения программа здравоохранения имела много невыполненных работниками заданий, после введения программы количество заданий выросло. Но на выплатах по больничным это. . .	1С: Контроль уникальности заводского номера Maks 23.03.2026 Алгоритм контроля уникальности заводского (или серийного) номера на примере документа выдачи шин для спецтехники с табличной частью. Данные берутся из регистра сведений, по которому настроено. . .
Хочу заставить корпорации вкладываться в здоровье сотрудников: делаю мат модель здравосохранения anaschu 22.03.2026 e7EYtONaj8Y Z4Tv2zpXVVo https:/ / github. com/ shumilovas/ med2. git	1С: Программный отбор элементов справочника по группе Maks 22.03.2026 Установка программного отбора элементов справочника "Номенклатура" из модуля формы документа. В качестве фильтра для отбора справочника служит группа номенклатуры. Отбор по наименованию группы. . .	Как я обхитрил таблицу Word Alexander-7 21.03.2026 Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .	Krabik - рыболовный бот для WoW 3.3.5a AmbA 21.03.2026 без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .

@wingblack 294 / 265 / 48 Регистрация: 09.04.2013 Сообщений: 1,038

	Рисование ориентированного графа 15.11.2013, 22:02. Показов 12831. Ответов 5 Метки нет (Все метки) Я, как нуб, ищу простой способ нарисовать граф с парой доп условий: - ноды должны содержать текст (порой до 60 символов, можно разбить на несколько строк) - имеется два типа связей и нод, желательно и то и другое выделить, например цветом - именно ор-граф не обязательно, но желательно Просмотрел много разных движков, останавливался на 2-х как выглядевших наиболее простыми: 1) https://github.com/anvaka/VivaGraphJS Научился вставлять текст вместо нод и делать его цветным, но не получилось разобраться с цветными линиями, да и с рисованием стрелки засада. К тому же как-то нужно добавить непрозрачный фон для текста, ибо линия связи перечеркивает текст 2) http://arborjs.org/halfviz/ Из коробки можно сделать и ор граф, и раскрасить ноды и линии, в принципе то что нужно, но... Но отсутствуют примеры как отдельные страницы. Автоматический парсинг текста в демках это конечно классно, но не добавляет понимания как с этим работать (по крайней мере для нуба в JS и SVG). Остановился на попытках растянуть canvas на весь экран - лучшее что получалось выглядело как растягивание мелкой картинки до нужных произвольных размеров вместо расширение области вывода c сохранением размеров текста и линий. 0

@wingblack 294 / 265 / 48 Регистрация: 09.04.2013 Сообщений: 1,038
	16.11.2013, 14:05 [ТС]
	Спасибо, конечно, за старания, но у меня весьма сложный граф, местами с кучей связей на одну ноду и циклами, и на данной реализации он вообще будет не читаем. Мне вчера добрый человек указал на Graphviz, который я уже встречал когда в последний раз хотел нарисовать граф, но поскольку сейчас у меня была четкая цель сделать именно веб страницу, то поиск по JS реализациям Graphviz позволил мне пройтись по страницам, которые на старые запросы гугл не выдавал. В частности мне очень понравилось вот это http://visjs.org/#gallery Думаю, так как тут есть все примеры которые меня интересуют, я смогу сделать что-то удобоваримое. 0