纯 JavaScript Graphviz 等效 [关闭]

Posted 2023-05-08

【中文标题】纯 JavaScript Graphviz 等效 [关闭]

【英文标题】：Pure JavaScript Graphviz equivalent [closed]

【发布时间】：2011-09-14 17:13:50

【问题描述】：

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

作为参考，这里是一个典型的 GraphViz 输出。请注意元素是如何堆叠和间隔开的，以允许连接线在节点之间行进，而不会相交（非常频繁）或穿过节点。

【问题讨论】：

对于我们这些不熟悉 GraphViz 的人，您有这样的图表示例吗？

这似乎是Graph visualization code in javascript?的副本

也许——检查一下。许多 cmets 和响应都指向与 GraphViz 完全不同的图表工具，或者只能绘制 GraphViz 输出，但不能自己进行布局。

【参考方案1】：

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

http://ushiroad.com/jsviz/

这个库没有文档记录——作者肯定应该更多地宣传和记录它（我会联系他，建议他至少把它放在 github 上）。

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

更新 (14/2/2013)：又一个竞争者出现了！任何对该主题感兴趣的人都应该看看 Viz.js 的 example page 和 github repo。

更新（2020 年 7 月 16 日）：（七年后）http://webgraphviz.com/ 也很棒！ :-)

【讨论】：

这个项目看起来很棒，可能是我所见过的最好的解决方案，但肯定需要对源代码进行一些挖掘才能弄清楚如何使用它。虽然代码看起来很合理，所以它可能没那么糟糕。

到目前为止，这是最接近我在原始问题中寻找的内容。它不仅仅是一个 RENDERER，它还知道如何计算有向图。它是在某处的后端运行 DOT，还是在我的浏览器上运行整个图形生成算法？

@Armentage，它完全在您的浏览器中运行。感谢emscripten，Graphviz 已编译为 JavaScript。源代码虽然没有尽可能地记录在案，但幸运的是（在通过 Twitter 和电子邮件唠叨作者之后）;-) 可用here。分叉项目并为它制作一个易于使用的 API 将是第一步。！

只是想将Graph Dracula 库添加到候选列表中。你可以看到一个演示here。它计算图形并显示它（使用Raphael）；代码简洁明了。

Livizjs 是一个很棒的工具，但请注意它不支持完整的语言，例如'clusters'

【参考方案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");

【讨论】：

这正是我一直在寻找的东西

更新：我创建了一个演示站点，展示了在 viz.js 中进行挂钩是多么有趣和简单！查看 www.webgraphviz.com

提供的github链接失效

github.com/mdaines/viz.js

【参考方案3】：

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

【讨论】：

viz.js 很棒而且非常简单，并不是说它目前不支持类似 html 的标签：graphviz.org/doc/info/shapes.html#html

【参考方案4】：

可以尝试将 graphviz 转换为 javascript，就像在“PDF 阅读器”示例中所做的那样： https://github.com/kripken/emscripten

【讨论】：

这是一个非常棒的建议。我正在考虑尝试自己将代码翻译成 JS……但是这个 llvm 技巧真是太疯狂了！

到目前为止，我实际上已经尝试了几次。emscripten 还很年轻，文档也很简短。绝对是一个值得一看的好项目，我可以看到它如何提供强大的动力。但现在，如果你不是写它的人，那就有点笨拙了。

【参考方案5】：

这不是一个现成的 graphviz 替代品，但 d3.js 是一个库，可以根据给定的数据进行各种布局，并且是实现 graphviz 的绝佳平台。

这里是 an example of force-directed layouts，这是 graphviz 的一种形式。

这里是a speech about layouts 和非常棒的interactive slides。

了解项目，tutorials 非常好。

【讨论】：

github.com/cpettitt/dagre-d3 在 JavaScript 中实现 DOT 图。您可以在cpettitt.github.io/project/dagre-d3/latest/demo/… 玩演示。

【参考方案6】：

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

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