Pure JavaScript Graphviz等效

126

是否有人知道GraphViz能够生成的定向流程图的基于Javascript的纯粹实现？我对漂亮的视觉效果输出不感兴趣，但是计算出每个节点的最大深度，以及贝塞尔曲线的布局，这些贝塞尔曲线经过优化，可以在处理图形而不是树时处理相交边缘的数量。的信息。我想在浏览器中运行这些代码;我知道我可以很容易地将Graphviz作为扩展插入到我的节点服务器中，甚至可以将其嵌入到.dot格式的图形信息中。Pure JavaScript Graphviz等效

作为参考，这里是一个典型的GraphViz输出。注意元素是如何叠加和分开的，以允许连接线在节点之间传播，而不会相交（经常）或通过节点。

enter image description here

来源

2011-06-14 Armentage

你有这样的一个例子图表，对于我们这些不熟悉GraphViz的人来说？ – 2011-06-14 13:44:50

这似乎是一个重复的[图形可视化代码在JavaScript？]（http://stackoverflow.com/questions/7034/graph-visualization-code-in-javascript） – 2011-06-15 16:58:30

也许 - 检查出来。许多评论和回应都指向图表工具，它们完全不像GraphViz，或者只能绘制* GraphViz输出，但不能自己完成布局。 – Armentage 2011-06-16 13:11:27

看看这个纯JavaScript实现一个.DOT画布渲染：

http://ushiroad.com/jsviz/

库未记录 - 笔者绝对应该宣传和记录它更（我会联系他建议他至少把它放在github上）。

更新：代码一直推到github上： https://github.com/gyuque/livizjs

更新（14/2/2013）：另一个竞争者已经出现！任何对这个主题感兴趣的人都应该看看Viz.js的example page和github repo。

来源

2012-07-04 20:33:13

这个项目看起来很神奇，可能是我见过的所有最好的解决方案，但是它肯定会在源代码中挖掘一些方法来弄清楚如何使用它。代码看起来很合理，但它可能并不那么糟糕。 – captncraig 2012-07-05 15:14:58

到目前为止，这与我在原始问题中寻找的最接近。它不仅仅是一个RENDERER，它也知道如何计算有向图。是在某个地方的后端运行DOT，还是整个图形生成算法在我的浏览器上运行？ – Armentage 2012-07-16 15:52:05

@Armentage，它完全在你的浏览器中运行。 Graphviz已被编译为JavaScript，这要归功于[emscripten]（https://github.com/kripken/emscripten/）。源代码虽然没有被记录下来，但现在幸运的是（在通过Twitter和电子邮件唠叨作者之后）;-)可用的[here]（https://github.com/gyuque/livizjs）。分叉项目并为其制作易于使用的API将是迈出的第一步！ – 2012-07-17 15:05:51

一个可以尝试转换的graphviz的JavaScript，就像它做了 'PDF阅读器' 例如： https://github.com/kripken/emscripten

来源

2011-06-16 19:07:26 pedroteixeira

这是一个非常棒的建议。我正在考虑将代码翻译成JS本身......但这个llvm技巧是美丽的疯狂！ – Armentage 2011-06-17 04:34:53

到目前为止，我实际上已经给出了这样一个尝试.. emscripten仍然很年轻，文档简介。这绝对是一个值得关注的伟大项目，我可以看到它如何提供很大的力量。但是现在如果你不是那个写它的人，那有点笨拙。 – synthesizerpatel 2011-12-29 06:44:05

这里的Graphviz的为Javascript使用Emscripten

一个交叉编译完成

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

来源

2012-04-28 04:24:03

这不是一个现成的graphviz替换，但d3.js是一个库，可以做各种layou从给定的数据，并将是一个很好的平台来实现graphviz。

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

这里的a speech about layouts与疯狂真棒interactive slides。

要了解该项目，tutorials是非常好的。

来源

2012-06-19 14:54:52 w00t

https://github.com/cpettitt/dagre-d3在JavaScript中实现DOT图。你可以在http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html上玩演示。 – Arthur2e5 2017-01-06 03:11:01

查看完所有选项后，我发现基于jsviz和graphviz.js的viz.js（https://github.com/mdaines/viz.js/）实际上具有可用于网页的API，并且有足够的示例可供您理解。

来源

2013-02-04 01:00:42

viz.js是伟大的，很容易，而不是它目前不支持HTML样标签： http：// www。 graphviz.org/doc/info/shapes.html#html – SirLenz0rlot 2013-02-08 10:15:54

经过搜索，我终于找到答案。

解决方案是有人用llvm + emscripten将Graphviz编译为Javascript。这里是链接：

http://viz-js.com/

源，可以发现： https://github.com/mdaines/viz.js

而简单地得到一个网页起来使用：

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

来源

2013-02-14 01:30:02

这正是我所期待的 – RobAu 2013-04-09 20:30:05

更新：我做了一个演示站点，展示了viz.js中的钩子是如何有趣和轻松！查看www.webgraphviz.com – 2013-07-23 01:57:27

提供的github链接已被破坏 – Jaime 2016-07-14 11:42:08

Pure JavaScript Graphviz等效

回答

相关问题