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

@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) не очень рассчитан на такой большой объем

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

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

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

	Рисование ориентированного графа 15.11.2013, 22:02. Показов 12789. Ответов 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