Эквивалент Graphviz на чистом JavaScript [закрыто]

139

Кто-нибудь знает о чистой реализации диаграмм направленного потока, основанной на Javascript, которую GraphViz может генерировать? Меня НЕ интересуют красивые визуальные эффекты, но вычисления для определения максимальной глубины каждого узла вместе с компоновкой линий Безье, которые оптимизированы для минимизации количества пересекающихся ребер, когда вы имеете дело с графиком, а не деревом информации. Я хотел бы запустить этот код как в браузере; Я знаю, что могу легко встроить Graphviz в свой сервер Node в качестве расширения или даже в popen()него и передавать информацию о графах в этом .dotформате.

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

введите описание изображения здесь

javascript graphviz Арментаж
источник
У вас есть пример такой диаграммы для тех из нас, кто не знаком с GraphViz?
Мэтт Болл
Кажется, это дубликат кода визуализации графа в javascript?
Дэниел Прайден
3
Может быть - проверяю. Многие комментарии и ответы указывают на инструменты построения диаграмм, которые совсем не похожи на GraphViz, или могут только рисовать выходные данные GraphViz, но не могут сами создавать макет.
Armentage

Ответы:

86

Взгляните на эту чистую реализацию JavaScript средства визуализации холста .dot:

http://ushiroad.com/jsviz/

Библиотека не документирована - автору определенно следует опубликовать и задокументировать ее больше (я свяжусь с ним, чтобы предложить, по крайней мере, разместить ее на github).

Обновление : код помещен в github: https://github.com/gyuque/livizjs

Обновление (14.02.2013) : появился еще один претендент! кто заинтересован в этой теме обязательно должны взглянуть на Viz.js в пример страницы и GitHub репо .

Обновление (16.07.2020) : (семь лет спустя) http://webgraphviz.com/ тоже здорово! :-)

Грег Садецкий
источник
1
Этот проект выглядит потрясающе и, вероятно, является лучшим решением из всех, что я видел, но определенно потребуется некоторое время покопаться в источнике, чтобы понять, как его использовать. Хотя код кажется довольно разумным, так что это может быть не так уж плохо.
captncraig 05
Пока что это ближе всего к тому, что я искал в исходном вопросе. Это не просто RENDERER, он также умеет вычислять ориентированный граф. Он запускает DOT где-нибудь на бэкэнде или весь алгоритм генерации графиков работает в моем браузере?
Armentage
1
@Armentage, он полностью работает в вашем браузере. Graphviz был скомпилирован на JavaScript благодаря emscripten . Исходный код, хотя и не так документирован, как мог бы, теперь, к счастью (после того, как автор придирался к нему через Twitter и электронную почту) ;-) доступен здесь . Разветвление проекта и создание для него простого в использовании API было бы первым отличным шагом ..!
Greg Sadetsky
5
Просто хотел добавить библиотеку Graph Dracula в список кандидатов. Вы можете посмотреть демо здесь . Он вычисляет график и отображает его (используя Рафаэль ); код короткий и чистый.
Greg Sadetsky
Livizjs - отличный инструмент, но обратите внимание, что он не поддерживает весь язык, например «кластеры»,
SirLenz0rlot
37

После долгих поисков я наконец нашел ответ.

Решением было то, что кто-то скомпилировал Graphviz в Javascript с помощью llvm + emscripten. Вот ссылка:

http://viz-js.com/

Источник можно найти по адресу: https://github.com/mdaines/viz.js

А чтобы просто запустить веб-страницу, используйте:

var graphviz_text = ...;
document.body.innerHTML += Viz(graphviz_text, "svg");
Захари Ворхис
источник
Это именно то, что я искал
RobAu
6
Обновление: я сделал демонстрационный сайт, показывающий, как легко и весело подключать viz.js! Проверьте это на www.webgraphviz.com
Zachary Vorhies
Предоставленные ссылки на github не работают
Jaime
2
github.com/mdaines/viz.js
Сому,
19

Посмотрев на все варианты, я нашел viz.js ( https://github.com/mdaines/viz.js/ ) на основе jsviz и graphviz.js, чтобы действительно иметь API, который можно использовать с веб-страницы, и достаточно примеров для понять.

Джейсон Сифкен
источник
1
viz.js великолепен и очень прост, не то чтобы в настоящее время он не поддерживает html-подобные ярлыки: graphviz.org/doc/info/shapes.html#html
SirLenz0rlot
11

Можно попробовать преобразовать graphviz в javascript, как это было сделано для примера «PDF-ридер»: https://github.com/kripken/emscripten

Pedroteixeira
источник
Это безумно отличное предложение. Я думал попробовать перевести код на JS сам ... но этот трюк с llvm - прекрасное безумие!
Armentage
На самом деле я уже сделал пару попыток ... emscripten все еще довольно молод, а документация краткая. Определенно отличный проект для просмотра, я вижу, как он может дать много энергии. Но прямо сейчас, если вы не тот парень, который написал это, это несколько громоздко.
синтезаторпатель
8

Это не готовая замена graphviz, но d3.js - это библиотека, которая может создавать различные макеты из заданных данных и может стать отличной платформой для реализации graphviz.

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

Вот речь о макетах с безумно удивительными интерактивными слайдами .

Чтобы познакомиться с проектом, уроки очень хороши.

w00t
источник
1
github.com/cpettitt/dagre-d3 реализует DOT-диаграмму в JavaScript. Вы можете поиграть с демо по адресу cpettitt.github.io/project/dagre-d3/latest/demo/… .
Mingye Wang