LINUX.ORG.RU

Нарисовать граф

 , ,


0

5

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

Исходный датасет обрабатываю на Python, но в целом готов рассмотреть другие популярные языки.

Есть ли какие-то готовые библиотеки с таким функционалом? Graphwiz, как я понимаю, не умеет в тонкую кастомизацию внешнего вида связей.

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

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

★★★★★

Последнее исправление: KivApple (всего исправлений: 2)

готовая библиотека/алгоритм оптимального позиционирования кружочков

Библиотек не знаю, а алгоритм - по мотивам «гиперболического дерева» много лет назад ваял вручную визуализацию на Java-applet встроенного в HTML.

На вход апплету - данные из БД, на выходе выглядело примерно как на википедии описано: «Единичный диск даёт образ плоскости как в линзе «рыбий глаз», выделяя узлы, находящиеся в фокусе, и показывая узлы вне фокуса ближе к краю диска.»

Toxo2 ★★★★
()

Graphwiz не умеет в тонкую кастомизацию внешнего вида связей.

Умеет, но не идеально. Всё-таки основная его задача это просчёт путей.

задавать цвет и толщину обоих концов связи между кружочками

Цвет и толщину можно задать как настройки для head/tail arrowhead.

связь рисовалась плавным переходом от одного цвета и толщины к другому

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

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

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

Раз всё равно нужен html, то я бы посоветовал vis.js, правда со сменой толщины связи там тоже не увидел примера, видимо слишком специфичное требование, зачем оно вообще нужно?

mydibyje ★★★★
()
Ответ на: комментарий от mydibyje

зачем оно вообще нужно

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

KivApple ★★★★★
() автор топика
Последнее исправление: KivApple (всего исправлений: 3)
Ответ на: комментарий от KivApple

Нагляднее было бы использовать два ребра, одно на приём в узел, другое на передачу из него, тогда у них будет постоянная толщина. Но при большом количестве нод, переменная толщина может и подойдёт лучше, ведь рёбер станет в два раза меньше, хотя тогда толщина ребра тоже будет отъедать пространство между узлами, и возможно в таком случае проще будет сделать толщину всех рёбер одинаковой, а вот уже на концах ребёр те самые arrowhead делать разных размеров…

P.S. вставить картинки в графвизе тоже можно.

mydibyje ★★★★
()
Ответ на: комментарий от KivApple

Т.е. топология сети (и размещение узлов и ребер графа на картинке) это штука постоянная (считается один раз), а вот информация по ребрам/узлам (толщины линий и аннотации) меняются интерактивно?

Я бы еще при отрисовке учитывал вес ребер, но graphviz так ЕМНИП умеет как раз. Вообще просится graphviz-ом сделать svg поставив вместо сообщений какие то уникальные слова, а потом в процессе работы на основе этого svg делать итоговый svg просто replace-ом меняя эти слова на содержательную инфу.

AntonI ★★★★★
()

у networkx встроенная визуализация, при помощи matplotlib

import matplotlib.pyplot as plt                                                                                                                                                              
import networkx as nx                                                                                                                                                                        
                                                                                                                                                                                             
G = nx.DiGraph()                                                                                                                                                                             
                                                                                                                                                                                             
G.add_node(1)                                                                                                                                                                                
G.add_node(2)                                                                                                                                                                                
G.add_node(3)                                                                                                                                                                                
G.add_edge(1,2)                                                                                                                                                                              
G.add_edge(1,3)                                                                                                                                                                              
G.add_edge(2,3)                                                                                                                                                                              
                                                                                                                                                                                             
nx.draw_networkx(G)                                                                                                                                                                          
plt.show(block=True)      
Sahas ★★★★☆
()
Ответ на: комментарий от AntonI

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

В графвизе не нашлось (может плохо искал) двух возможностей: передать габариты узлов и кластеризовать узлы.
Скажем, если отрисовывать данные из OSPF DB, то хотелось бы девайсы из одной area держать рядом.

frob ★★★★★
()
Ответ на: комментарий от frob

Ах, да… если из графвиза только брать координаты, то завтра можно присобачить что-нибудь ещё вместо (или вместе) и дать пользователю возможность повыбирать из разных вариантов.

frob ★★★★★
()
Ответ на: комментарий от KivApple

А табличное представление не рассматривали как вариант?

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

blex ★★★
()

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

https://www.data-to-viz.com/graph/network.html https://observablehq.com/@d3/force-directed-graph-component

ei-grad ★★★★★
()
Последнее исправление: ei-grad (всего исправлений: 1)