LINUX.ORG.RU

[web] Визуализация графа


0

2

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

Проблемы тут две с половиной: 1. Я совсем не умею в веб-разработку, умею только в сишечки и прочие жабы; 2. Граф может довольно большим и может не влезать на экран; 2.5. Клиентские машины не самые топовые и подгрузить весь граф в память, скорее всего, будет проблематично без тормозов. Да и сервер фейсбуковским не чета.

Как это можно сделать? Подгружать узлы порциями и лепить в svg-картинку? Использовать canvas? Чисто на js/css без этих новомодных html5-примочек? Просто генерить на сервере плитку из картинок, как это делается в яндекс-картах (сервер будет сильно загружен)?


думаю svg-картинка или плитка из .png не будет сильно нагружать

была ещё где-то JS либа для векторного 2D, но это уже больше на костыль похоже

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

думаю svg-картинка или плитка из .png не будет сильно нагружать

А как ведет себя svg-картинка на, скажем, 10000 таких узлов (т.е. более 50000 элементов всего)? И для каждого еще событие на click и over? Можно ли отображать только отмасштабированный кусок такой картинки, чтобы эмулировать прокрутку? Или также можно сделать плитку из .svg? Когда я смотрю политическrую карту мира, у меня все очень тормозит.

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

политическrую карту мира, у меня все очень тормозит.

у меня тоже, и там нет ни over ни click, svg это только векторный формат файла

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

ну это в википедии нету, а вообще как минимум в браузере можно задавать событие на mouseover и подобные.

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

Svg-файл целиком должен загрузиться, так что надо хорошенько подумать.

power ()
Ответ на: комментарий от gaga

А как ведет себя svg-картинка на, скажем, 10000 таких узлов (т.е. более 50000 элементов всего)?

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

tensai_cirno ★★★★★ ()

Если есть возможность, то можно рисовать на webgl. Попроще — на canvas. Еще проще для клиента — как в гугл мэпс, для этого даже библиотеки есть.

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

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

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

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

Ну да, ОП-пост не читай, сразу комментарии читай.

Слишком размыто, но кажется суть уловил.

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

в общем да, если ограничивать количество видимых вершин, то мне кажется, что должно получиться и на голом Js. В конкретно моем случае на этом можно и успокоиться.

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

gaga ()

Если граф статический, то разбивай на плитки и выводи с помощью js/canvas, js/css подгружая плитки по необходимости (см. AJAX); если граф динамический, то тут только js/canvas, там есть функции для вывода графических примитивов - линии, кружки, как раз то, что тебе нужно. Можно ещё к связке js/canvas добавить webgl, но эта технология не всеми браузерами поддерживается по умолчанию, придётся дополнительно в настройках браузера ковыряться, не каждый пользователь на это согласится, плюс придётся ещё и шейдеры изучать, так что это на крайний случай, если всё будет тормозить жутко.

borzja ()

webgl, весь граф не такой и большой.
докачивать только информацию об узлах.

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

Ага, видел эту либу. Надо будет попробовать на большом числе узлов.

gaga ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.