一个Web应用中的交互式Graphviz图表

29

我正在使用Python制作几个交互式图形可视化,用于我的Django Web应用程序。我发现了Graphviz工具,并且使用Pydot(Graphviz的dot语言Python接口)在我的应用程序上输出了一个静态图形(作为.png图像)。

但是,我希望让我的图形更加交互式,例如当我将鼠标悬停在节点上时能够高亮显示节点,使节点可点击、将节点拖到不同位置并对图形进行缩放等。

是否有办法在Graphviz中实现这些功能?或者,一般来说,是否有一种方法可以在我的Django应用程序中创建交互式图形而无需使用Flash?我不想使用Flash,因为我不太熟悉它,而且我要可视化一个相当大的数据集。

6个回答

18

嗨,Tamás,Javascript Infovis Toolkit看起来非常酷。你知道我们是否可以在其中制作自定义形状吗?例如,将节点作为某些图像而不是通常的正方形/圆形。 我会看一下的。干杯 :) - Akshay K
1
我认为这是可能的;请参阅文档页面:http://thejit.org/static/v20/Docs/files/Options/Options-Node-js.html 。它说:“您还可以将(非内置)自定义节点类型实现到您的可视化中。”(请参见“type”参数) - Tamás
再次感谢。我会看一下Javascript Infovis Toolkit。 - Akshay K

12

有一个名为Canviz (源代码)的工具可用。然而,节点目前还不能被点击(在旧版本中,它们使用图像映射实现了此功能)。由于代码库已更改,现在渲染是在客户端使用JavaScript完成的,这就是为什么尚未重新启用可点击链接的原因。

这是我找到的最好的工具,不过也有其他很多选择。

mxGraph (非免费)


谢谢你的回复,Nicolas。我也看了Canviz。我想在节点再次可点击之前,我必须等待一段时间。我也会看看mxGraph。 - Akshay K

10

5
你可以通过DOT和HTML非常简单地完成以下操作。
生成客户端地图并将其覆盖在PNG图片上。(将地图代码插入HTML页面。)
dot test.dot -Tpng -o test.png -Tcmapx -o test.map

SVG导出文件可直接点击。


1

看起来适合您尝试的方法可能是在浏览器中使用SVG和/或JavaScript。我认为大多数现代浏览器都支持SVG,并且可以让您做一些非常酷的交互式图形。服务器可以提供所需数据点的JSON源以呈现图形。我不知道可用的工具,但我已经看到一些非常酷的图形演示通过客户端方法构建而不需要Flash。

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


1
嘿,乔,我会尝试使用SVG。我认为Graphviz可以制作它们。不过,重新渲染可能不是最好的选择(因为你提到的同样的原因)。感谢回复! - Akshay K

1

我不久前也做过你现在尝试做的事情。当时的背景是可视化一个复杂的SalesForce模式。

首先,graphviz只适用于绘图,而不是真正的绘画。你可以生成SVG,但我花了相当长的时间(结果证明是徒劳无功)后,我无法让它在IE上运行。

我找到了这个Java Applet ZGRViewer,虽然Applets对我来说有点过时,但它在跨浏览器方面表现得非常好。

我基本上手动编写了一个进程调用服务,生成了dot文件并通过dotty运行它们 - 可视化Applet读取本地的dot文件格式。

我还发现了一些关于V2(从未发生)的想法 - 它是AJAX控件工具包的一部分 - Seadragon

如果你想看ASP.NET代码,我可以发布它。


嘿,Gabriel,感谢你的快速回复。ZGRViewer看起来非常有用。我会试一试。此外,我看到了一些使用Seadragon制作的图表,不确定除缩放和可能添加搜索按钮之外,是否有任何交互性。话虽如此,看看代码并了解您如何实现它会很有趣 :)(附言:尝试为您投票,但需要+15声望,而我的目前只有6!) - Akshay K

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接