Чистий еквівалент JavaScript Graphviz [закрито]


139

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

Для довідки, ось типовий вихід GraphViz. Зверніть увагу на те, як елементи складаються та розташовуються між собою, щоб з’єднувальні лінії могли проходити між вузлами, не перетинаючись (дуже часто) чи проходячи через вузли.

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


Чи є у вас приклад такої діаграми для тих, хто не знайомий з GraphViz?
Метт Бал


3
Можливо - перевірити. Дуже багато коментарів та відповідей вказують на інструменти графіків, які зовсім не схожі на GraphViz або здатні лише малювати вихід GraphViz, але не можуть зробити макет самостійно.
Арментаж

Відповіді:


84

Погляньте на таку чисту реалізацію JavaScript в форматі .dot canvas:

http://ushiroad.com/jsviz/

Бібліотека не задокументована - автор, безумовно, повинен оприлюднити та задокументувати її більше (я зв’яжуся з ним, щоб запропонувати він викласти його на github, принаймні).

Оновлення : код було передано до github: https://github.com/gyuque/livizjs

Оновлення (14.02.2013) : виникла ще одна претендентка! будь-хто, хто цікавиться цією темою, обов'язково повинен ознайомитись із прикладом Viz.js та github repo .

Оновлення (16.07.2020) : (сім років потому) http://webgraphviz.com/ також чудово! :-)


1
Цей проект виглядає дивовижним і, мабуть, найкращим рішенням із усіх, що я бачив, але, безумовно, знадобиться викопати джерело, щоб з’ясувати, як ним користуватися. Код здається досить розумним, тому він може бути не таким поганим.
captncraig

Поки що це найближче до того, що я шукав в оригінальному питанні. Це не просто РЕНДЕР, він також знає, як обчислити спрямований графік. Чи десь він працює DOT на бекенді, або весь алгоритм генерації графіків працює в моєму браузері?
Арментаж

1
@Armentage, він працює повністю у вашому браузері. Graphviz був складений в JavaScript, завдяки emscripten . Вихідний код, хоч і не настільки задокументований, як міг би бути, але на щастя (після натягування автора на Twitter та електронну пошту) ;-) тут . Формування проекту та створення простого у користуванні API для нього було б першим чудовим кроком ..!
Грег Садецький

5
Просто хотів додати бібліотеку Graph Dracula до списку кандидатів. Демонстрацію ви можете подивитися тут . Він обчислює графік і відображає його (використовуючи Рафаеля ); код короткий і чистий.
Грег Садецький

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
Захарій Vorhies

Надані посилання github розірвані
Jaime


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 Reader": https://github.com/kripken/emscripten


Це шалено чудова пропозиція. Я думав намагатися сам перекласти код на JS ...... але ця хитрість llvm - це прекрасне божевілля!
Арментаж

Я фактично дав це пара намагається поки що .. emscripten ще досить молода, а документація коротка. Безумовно, чудовий проект для перегляду, я бачу, як він може забезпечити багато сил. Але зараз, якщо ви не той хлопець, який написав це, це дещо непросто.
синтезаторпатель

8

Це не готова заміна graphviz, але d3.js - це бібліотека, яка може робити різні макети з даних даних і була б чудовою платформою для впровадження graphviz.

Ось приклад силових макетів, що є однією з форм того, що робить graphviz.

Ось мова про макети з шалено дивовижними інтерактивними слайдами .

Щоб познайомитися з проектом, підручники дуже хороші.


1
github.com/cpettitt/dagre-d3 реалізує DOT-діаграму в JavaScript. Ви можете грати з демонстрацією на cpettitt.github.io/project/dagre-d3/latest/demo/… .
Arthur2e5

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.