纯JavaScript Graphviz等效

Question

有人知道GraphViz能够生成的方向流图的纯粹,基于Javascript的实现吗？我对漂亮的视觉效果输出不感兴趣,但计算出每个节点的最大深度,以及优化贝塞尔线的布局,以便在处理图形而不是树时最小化相交边的数量信息.我想在浏览器中运行此代码; 我知道我可以轻松地将Graphviz作为扩展名嵌入到我的节点服务器中,甚至popen()可以将.dot格式化的图形信息流式传输.

作为参考,这是典型的GraphViz输出.注意元素如何堆叠和间隔开以允许连接线在节点之间传播,而不交叉(经常)或穿过节点.

Answer 1

看一下.dot canvas渲染器的纯JavaScript实现:

http://ushiroad.com/jsviz/

图书馆没有记录 - 作者肯定应该更多地宣传和记录它(我会联系他,建议他把它放在github上,至少).

更新:代码已被推送到github:https: //github.com/gyuque/livizjs

更新(2013年2月14日):另一个竞争者出现了!任何对这个主题感兴趣的人都应该看看Viz.js的示例页面和github repo.

Answer 2

经过深远的搜寻,我终于找到了答案.

解决方案是有人使用llvm + emscripten将Graphviz编译为Javascript.链接在这里:

http://viz-js.com/

可以在以下网址找到该来源:https: //github.com/mdaines/viz.js

并简单地使用网页:

var graphviz_text = ...;
document.body.innerHTML += Viz(graphviz_text, "svg");

Answer 3

在查看了所有选项后,我发现基于jsviz和graphviz.js的viz.js(https://github.com/mdaines/viz.js/)实际上可以从网页上获得一个API,并且有足够的示例来了解.

Answer 4

可以尝试将graphviz转换为javascript,就像它为"PDF阅读器"示例所做的那样:https: //github.com/kripken/emscripten

Answer 5

这不是现成的graphviz替换,但d3.js是一个可以从给定数据执行各种布局的库,并且是实现graphviz的一个很好的平台.

这是一个力导向布局的例子,这是graphviz所做的一种形式.

这是一个关于布局的演讲,其中包含非常棒的交互式幻灯片.

要了解该项目,教程非常好.

Answer 6

这是使用Emscripten完成Graphviz到Javascript的交叉编译

https://github.com/bpartridge/graphviz.js