纯 JavaScript Graphviz 等价物
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6344318/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pure JavaScript Graphviz equivalent
提问by Armentage
Is anyone aware of a pure, Javascript based implementation of the directional flow diagrams that GraphViz is capable of generating? I am NOT interested in pretty visuals output, but the computations to figure out the maximum depth of each node, along with the layout of bezier lines that are optimized to minimize the number of intersecting edges when you are dealing with a graph rather than a tree of information. I would like to run this code both within a browser; I am aware that I could easily embed Graphviz into my Node server as an extension, or even popen()it and stream over graph information in the .dotformat.
有没有人知道 GraphViz 能够生成的定向流程图的纯的、基于 Javascript 的实现？我对漂亮的视觉输出不感兴趣，但计算每个节点的最大深度，以及优化贝塞尔线的布局，以在处理图形而不是树时最小化相交边的数量的信息。我想在浏览器中运行这段代码；我知道我可以轻松地将 Graphviz 作为扩展嵌入到我的 Node 服务器中，甚至可以将它嵌入到格式中的popen()图形信息上.dot。
For reference, here is a typical GraphViz output. Note how elements are stacked and spaced out to allow the connecting lines to travel between nodes, without intersecting (very often) or passing through nodes.
作为参考，这里是一个典型的 GraphViz 输出。请注意元素是如何堆叠和间隔开的，以允许连接线在节点之间移动，而不交叉（经常）或穿过节点。
采纳答案by Greg Sadetsky
Take a look at this pure JavaScript implementation of a .dot canvas renderer:
看看这个 .dot 画布渲染器的纯 JavaScript 实现：
The library is not documented -- the author definitely ought to publicize and document it more (I'll contact him to suggest he put it up on github, at the very least).
这个库没有记录——作者肯定应该更多地宣传和记录它（我会联系他建议他至少把它放在 github 上）。
Update: code has been pushed to github: https://github.com/gyuque/livizjs
更新：代码已经推送到github：https: //github.com/gyuque/livizjs
Update (14/2/2013): another contender has arisen! anybody interested in the subject should definitely take a look at Viz.js's example pageand github repo.
更新（14/2/2013）：又一个竞争者出现了！任何对该主题感兴趣的人都应该查看 Viz.js 的示例页面和github repo。
回答by Zachary Vorhies
After searching far and low I finally found the answer.
经过千里迢迢，终于找到了答案。
The solution was that someone cross compiled Graphviz to Javascript using llvm + emscripten. Here is the link:
解决方案是有人使用 llvm + emscripten 将 Graphviz 交叉编译为 Javascript。链接在这里：
The source can be found at: https://github.com/mdaines/viz.js
来源可以在：https: //github.com/mdaines/viz.js
And to simply get a webpage up use:
并简单地获取网页使用：
var graphviz_text = ...;
document.body.innerHTML += Viz(graphviz_text, "svg");
回答by Jason Siefken
After looking at all the options, I found viz.js (https://github.com/mdaines/viz.js/) based off of jsviz and graphviz.js to actually have an API usable from a webpage, and enough examples to understand.
在查看了所有选项后，我发现基于 jsviz 和 graphviz.js 的viz.js ( https://github.com/mdaines/viz.js/) 实际上有一个可从网页上使用的 API，以及足够的示例理解。
回答by pedroteixeira
One could try convert graphviz to javascript, just like it was done for the 'PDF reader' example: https://github.com/kripken/emscripten
可以尝试将 graphviz 转换为 javascript，就像为“PDF 阅读器”示例所做的那样：https: //github.com/kripken/emscripten
回答by w00t
This is not a ready-made graphviz replacement but d3.jsis a library that can do various layouts from given data and would be a great platform to implement graphviz on.
这不是一个现成的 graphviz 替代品，但d3.js是一个可以根据给定数据进行各种布局的库，并且将是实现 graphviz 的绝佳平台。
Here's an example of force-directed layoutswhich is one form of what graphviz does.
这是一个力导向布局的例子，它是 graphviz 所做的一种形式。
Here's a speech about layoutswith insanely awesome interactive slides.
To get to know the project, the tutorialsare very good.
要了解项目，教程非常好。
回答by Paul Dixon
Here is a cross compilation of Graphviz to Javascript done using Emscripten
这是使用 Emscripten 完成的 Graphviz 到 Javascript 的交叉编译
