Интерактивные графы Graphviz в веб-приложении

Question

Я пытаюсь сделать несколько интерактивных графических визуализаций в моем веб-приложении Django с использованием Python. Я нашел Graphviz и смог вывести статический график (в виде изображения .png) на свое приложение, используя Pydot (интерфейс Python для точечного языка Graphviz).

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

Есть ли способ сделать это в Graphviz? Или вообще есть ли способ сделать интерактивный график для моего приложения Django без использования Flash? Я не хочу использовать флэш-память, так как я не очень знаком с ней, а также потому, что хочу визуализировать довольно большой набор данных.

Answer 1

Попробуйте Набор инструментов Javascript Infovis . Все это реализовано на холсте браузера, поэтому Flash не требуется, только приличный браузер с поддержкой тега <canvas>. Примеры визуализации графиков: здесь , здесь и здесь , другие демонстрации здесь .

Answer 2

Есть Canviz ( источник ). Однако узлы еще не активируются (они были в более старой версии, в которой использовались карты изображений. База кода изменилась, и теперь рендеринг выполняется на стороне клиента с использованием JavaScript, поэтому кликабельные ссылки еще не включены.

Это лучшее, что я нашел, однако их много.

mxGraph (Не бесплатно)

Answer 3

Вы можете использовать D3.js для визуализации графа (см. здесь для примеров визуализации графа в D3js , а также Как сделать интерактивную визуализацию сети ).

Для бэк-энда (если для представления графика необходимо иметь что-то большее, чем просто файл json - т.е. если он большой), то вы можете использовать модуль Python для графиков, NetworkX .

Примечание, вот мой простой пример визуализации интерактивного графика :

Answer 4

Вы можете сделать что-то подобное очень просто, используя DOT и HTML.

Создание клиентских карт и наложение их на изображения PNG. (Вставьте код карты в HTML-страницу.)

dot test.dot -Tpng -o test.png -Tcmapx -o test.map

Экспорт в SVG осуществляется по клику.

Answer 5

Я сделал то, что вы пытаетесь сделать не так давно.Контекст визуализировал грубую схему SalesForce.

Во-первых, graphviz хорош только для черчения, а не для рисования.Вы можете сгенерировать SVG, но я не смог заставить его работать с IE после значительных (что оказалось бесплодным) усилий.

Я ДОЛЖЕН найти этот Java-апплет ZGRViewer достаточными хотя апплеты на мой вкус немного устарели, они отлично работали в разных браузерах.

Я, в основном, вручную кодировал службу, запускающую процесс, которая генерировала точечные файлы и запускала их, как думали (dotty, как думаешь?) -апплет визуализации читает собственный формат файла точек.

Я также натолкнулся на кое-что, о чем подумал для V2 (чего никогда не было) - он является частью набора инструментов управления AJAX - Seadragon .

Если вы хотите увидеть код в ASP.NET, я могу опубликовать его.

Answer 6

Кажется, что подход, который подходит для того, что вы пытаетесь сделать, может заключаться в использовании svg в браузере и / или JavaScript. Я думаю, что большинство современных браузеров поддерживают SVG и позволят вам создавать довольно интересные интерактивные графики. Сервер может предоставить json-канал точек данных, необходимых для визуализации графика. Я не знаю, какие инструменты доступны, но я видел несколько довольно крутых графических демонстраций, созданных без использования подходов на стороне клиента.

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