有没有适用于Dot语言文件可视化的jQuery插件？

Question

有没有适用于在浏览器中实时显示Dot文件的jQuery插件，如此处所述？

我在Visual Politics看到过一个概念证明，但它似乎并不完全支持Dot语言，甚至连“-”也无法正确显示。

有没有可供参考的库可以用来实现通过Ajax加载dot文件并在浏览器中生成网络图（而不是服务器端生成PNG）？

- EarlyPoster

Answer 1

请查看Canviz：http://code.google.com/p/canviz/

演示位于此处：http://www.ryandesign.com/canviz/

- Heikki

---

那看起来很不错。我只是想看看还有什么其他的选择。谢谢。 - EarlyPoster

Answer 2

当我在寻找同样的答案时，我发现 "viz.js" 提供了一个基于 java script 的 GraphViz DOT 版本（参见 https://github.com/mdaines/viz.js）。

使用它，我为自己构建了一个 WordPress 插件 WP GraphViz（参见 http://wordpress.org/plugins/wp-graphviz/）。

- user2732359

Answer 3

我已经做了将近一周的工作。

有三种不同的实现：

1.使用简单的js渲染svg，无需安装graphviz

jquery.graphviz.svg https://github.com/mountainstorm/jquery.graphviz.svg

jQuery插件使Graphviz SVG输出更具交互性和易于导航。 它可以轻松实现以下功能：

• 突出显示节点/边缘
• 放大/缩小
• 图形导航-选择链接节点
• 美观的UI工具提示； 支持开箱即用的bootstrap
• 在图表中向前/向后移动

请查看演示：https://cdn.rawgit.com/mountainstorm/jquery.graphviz.svg/master/demo.html

2.基于d3.js

<https://github.com/dagrejs/dagre-d3>  d3.js + dagre

    <https://github.com/dagrejs/dagre>  pure js library

或者：

<https://github.com/magjac/d3-graphviz>  d3.js + graphviz c++ build

    <https://github.com/hpcc-systems/hpcc-js-wasm>  build graphviz 2.47 

3. 服务器端调用graphviz生成svg文件。

<http://viz-js.com/>

    <https://github.com/mdaines/viz.js>

<https://github.com/dreampuf/GraphvizOnline>
    

- m666m