等价于纯 JavaScript Graphviz

有人知道 GraphViz 能够生成纯粹的、基于 Javascript 的方向流图的实现吗？我对漂亮的视觉输出不感兴趣，但是计算出每个节点的最大深度，以及贝塞尔线的布局，当你处理一个图形而不是一棵信息树时，这些布局被优化以最小化交叉边的数量。我希望在浏览器中运行这段代码; 我知道我可以很容易地将 Graphviz 作为扩展嵌入到我的 Node 服务器中，甚至可以将它作为 popen()，然后以 .dot格式流过图形信息。

作为参考，下面是一个典型的 GraphViz 输出。请注意元素是如何堆叠和间隔的，以允许连接线在节点之间移动，而不需要交叉(通常)或通过节点。

enter image description here

66345 次浏览
小开

人们可以尝试将 Graphviz 转换为 javascript，就像对“ PDF 阅读器”的例子所做的那样: Https://github.com/kripken/emscripten

小开

这里是一个 Graphviz 到 Javascript 的交叉编译，使用 Emscripten 完成

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

小开

这并不是一个现成的 Graphviz 替代品，但是 D3.js是一个库，它可以根据给定的数据进行各种布局，并且是实现 Graphviz 的一个很好的平台。

这是 力定向布局的一个例子，它是 Graphviz 的一种形式。

这是 关于布局的演讲和超赞的 互动幻灯片。

了解该项目，教程是非常好的。

小开
最佳答案

看看这个.dot 画布渲染器的纯 JavaScript 实现:

Http://ushiroad.com/jsviz/

图书馆是没有文档的——作者肯定应该更多地宣传和记录它(我会联系他，建议他至少把它放在 github 上)。

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

更新(14/2/2013) : 另一个竞争者出现了！对这个主题感兴趣的人一定要看看 Viz.js 的 示例页和 Github Repo。

更新(7/16/2020) : (7年后) http://webgraphviz.com/也很棒! : -)

小开

在查看了所有选项之后，我发现基于 jsviz 和 Graphviz.js 的 viz.js (https://github.com/mdaines/viz.js/)实际上有一个可以在网页上使用的 API，并且有足够多的例子可以理解。

小开

经过长时间的搜寻，我终于找到了答案。

解决方案是有人使用 llvm + emscripten 将 Graphviz 交叉编译成 Javascript:

Http://viz-js.com/

资料来源: Https://github.com/mdaines/viz.js

简单地建立一个网页使用:

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

提交答案