Web 应用程序中的交互式 Graphviz 图形

Posted 2023-03-12

【中文标题】Web 应用程序中的交互式 Graphviz 图形

【英文标题】：Interactive Graphviz graphs in a web application

【发布时间】：2011-08-26 14:39:04

【问题描述】：

我正在尝试使用 Python 在我的 Django Web 应用程序中创建一些交互式图形可视化。我找到了 Graphviz，并能够使用 Pydot（Graphviz 点语言的 Python 接口）在我的应用程序上输出静态图（作为 .png 图像）。

但是，我希望让我的图表更具交互性，例如当我将鼠标移到节点上时能够突出显示节点、使节点可点击、将节点拖动到不同的位置以及缩放图表。

有没有办法在 Graphviz 中做到这一点？或者一般来说，有没有办法为我的 Django 应用程序制作交互式图表而无需使用 Flash？我不想使用 flash，因为我不太熟悉它，而且我想可视化一个相当大的数据集。

【参考方案1】：

只需使用 DOT 和 html，您就可以非常简单地执行此类操作。

生成客户端地图并将它们覆盖在您的 PNG 图像上。 （将地图代码插入 HTML 页面。）

dot test.dot -Tpng -o test.png -Tcmapx -o test.map

SVG 导出可直接点击。

【参考方案2】：

试试The javascript Infovis Toolkit。它全部在浏览器画布中实现，因此不需要 Flash，只需要一个支持<canvas> 标签的体面浏览器即可。图形可视化示例为here、here 和here，其他演示为here。

【讨论】：

您好 Tamás，Javascript Infovis Toolkit 看起来确实很酷。你知道我们是否可以在其中制作自定义形状吗？例如，将节点作为一些图像而不是通常的正方形/圆形。我来看看。干杯:)

我认为有可能；请参阅文档中的此页面：thejit.org/static/v20/Docs/files/Options/Options-Node-js.html。它说“您还可以在可视化中实现（非内置）自定义节点类型。” （见“类型”参数）

再次感谢。我来看看 Javascript Infovis Toolkit

【参考方案3】：

您可以使用D3.js 进行图形可视化（请参阅here for examples of graph visualizations in D3js，并查看How to Make an Interactive Network Visualization）。

对于后端（如果需要不仅仅是一个 json 文件来表示图形 - 即如果它很大），那么您可以使用 Python 模块来处理图形，NetworkX。

旁注，这里是my simple interactive graph visualization example：

【参考方案4】：

不久前我已经做了你想做的事。上下文正在可视化一个粗糙的 SalesForce 架构。

首先，graphviz 仅适用于绘图，而不适用于绘图。你可以生成 SVG，但我无法让它与 IE 一起使用。经过相当多的（结果是徒劳的）努力。

我确实发现这个 Java 小程序 ZGRViewer 就足够了，虽然小程序对我的口味来说有点过时，但它在跨浏览器上运行得很好。

我基本上是手动编写了一个进程调用服务，它生成了点文件并运行它们（dotty，是吗？） - 可视化小程序读取本机点文件格式。

我还遇到了一些我为 V2 考虑过的东西（从未发生过） - 它是 AJAX 控制工具包的一部分 - Seadragon。

如果你想看 ASP.NET 中的代码，我可以贴出来。

【讨论】：

嗨，加布里埃尔，感谢您的快速回复。 ZGRViewer 看起来确实很有用。我会试试看。我还看到了一些使用 Seadragon 制作的图表，我不确定使用 Seadragon 创建的图表中是否有任何交互性，除了缩放和可能添加搜索按钮。话虽如此，看看代码并看看你是如何实现它会很有趣:)（ps试图投票给你，但它需要+15的声誉，而我的声誉目前是6！）

【参考方案5】：

似乎适合您尝试做的方法可能是在浏览器和/或 javascript 中使用 svg。我认为大多数现代浏览器都支持 SVG，并且可以让您制作一些非常酷的交互式图表。服务器可以提供渲染图形所需的数据点的 json 提要。我不知道可用的工具，但我已经看到了一些非常酷的图形演示，它们通过客户端方法构建了没有 Flash。

作为替代方案，您可以预渲染一组用户可能会查看的图形图像，然后在用户与图形交互时获取这些图像。如果图表不经常更改并且用户进行的更改次数很少，这可能会起作用，但是每次图表更改时您都必须重新渲染。

【讨论】：

嘿乔，我会看看我能用 SVG 做什么。我认为 Graphviz 确实允许您制作它们。不确定重新渲染是否对我来说是最好的选择（因为你给出的原因相同）。为响应干杯！

【参考方案6】：

有Canviz (source)。但是，节点还不能点击（它们在使用图像映射的旧版本中。代码库已更改，现在渲染正在客户端使用 javascript 进行，这就是尚未重新启用可点击链接的原因。

这是我找到的最好的，但还有很多其他的。

mxGraph（非免费）

【讨论】：

感谢尼古拉斯的回复。我也看过Canviz。我想我必须等待节点再次变得可重新点击。我也会看看 mxGraph。