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

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

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

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

20
django graph graphviz pydot web-applications

6 ответов

попробовать В JavaScript Infovis Toolkit И. Все это реализовано в браузере canvas, поэтому вспышка не нужна, только приличный браузер с поддержкой <canvas> тег. Примеры визуализации графа:здесь, здесь и здесь, другие Демы здесь.

16

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

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

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

12

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

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

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

enter image description here

8

вы можете сделать что-то вроде этого очень просто с помощью DOT и HTML.

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

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

экспорт SVG можно напрямую щелкнуть.

3

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

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

1

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

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

Я нашел этот Java-апплет ZGRViewer достаточно, и в то время как апплеты немного устарели на мой вкус, он работал очень хорошо крест браузер.

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

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

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

1