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

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

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

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

Ответ 1

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

Ответ 2

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

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

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

Ответ 3

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

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

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

Ответ 4

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

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

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

Экспорт SVG можно напрямую кликать.

Ответ 5

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

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

Ответ 6

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

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

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

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

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

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