Web 应用程序中的交互式 Graphviz 图表
我正在尝试使用 Python 在 Django Web 应用程序中制作一些交互式图形可视化。我找到了 Graphviz，并且能够使用 Pydot（Graphviz 点语言的 Python 接口）在我的应用程序上输出静态图（作为 .png 图像）。
但是，我希望使我的图表更具交互性，例如当我将鼠标移到节点上时能够突出显示节点，使节点可单击，将节点拖动到不同的位置并缩放图表。
有没有办法在 Graphviz 中做到这一点？或者一般来说有没有办法为我的 Django 应用程序制作交互式图表而无需使用 Flash？我不想使用 Flash，因为我对它不太熟悉，而且我想可视化相当大的数据集。
I am trying to make a few interactive graph visualisations in my Django web application using Python. I found Graphviz and was able to output a static graph (as a .png image) on my application using Pydot (Python interface to Graphviz's dot language).
However, I am looking to make my graphs more interactive, like being able to highlight nodes when passing my mouse over it, making the nodes click-able, dragging the nodes to a different location and zooming on the graph.
Is there a way I could do this in Graphviz? Or in general is there way to make an interactive graph for my Django application without having to use Flash? I don't want to use flash since I'm not that familiar with it and also since I want to visualise a fairly large dataset.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
尝试Javascript Infovis 工具包。这一切都是在浏览器画布中实现的，因此不需要 Flash，只需要一个支持
标签的合适浏览器即可。图形可视化示例位于此处、此处 和 此处，其他演示为此处。Try The Javascript Infovis Toolkit. It is all implemented in a browser canvas, so no Flash is needed, only a decent browser with support for the
<canvas>tag. Graph visualization examples are here, here and here, other demos are here.有Canviz（来源< /a>）。但是，节点尚不可单击（它们处于使用图像映射的旧版本中。代码库已更改，现在使用 javascript 进行渲染，这就是为什么可单击链接尚未重新启用。
这是最好的但我发现还有很多其他的
mxGraph （不是免费的）
There is Canviz (source). However, nodes are not yet clickable (they were in an older version that used image maps. The code base has changed and now the rendering is happenning client side using javascript, which is why clickable links is not yet re enabled.
This is the best I found, however they are plenty of others.
mxGraph (Not free)
您可以使用 D3.js 进行图形可视化（请参阅 这里是 D3js 中图形可视化的示例，并查看 如何制作交互式网络可视化）。
对于后端（如果需要的不仅仅是一个 json 文件来表示图形 - 即如果它很大），那么您可以使用图形的 Python 模块， NetworkX。
旁注，这里是我的简单交互式图形可视化示例：
You can use D3.js for graph visualization (see here for examples of graph visualizations in D3js, and look at How to Make an Interactive Network Visualization).
For back-end (if it is necessary to have something more than just a json file to represent the graph - i.e. if it is large), then you can use a Python module for graphs, NetworkX.
Side note, here is my simple interactive graph visualization example:
您只需使用 DOT 和 HTML 就可以非常简单地完成类似的事情。
生成客户端地图并将其覆盖在您的 PNG 图像上。 （将地图代码插入 HTML 页面。）
SVG 导出可直接单击。
You can do something like this very simply just with DOT and HTML.
Generate client-side maps and overlay them over your PNG images. (Insert the map code into the HTML page.)
SVG exports are directly clickable.
看起来适合您尝试做的事情的方法可能是在浏览器和/或 javascript 中使用 svg 。我认为大多数现代浏览器都支持 SVG，并且允许您制作一些非常酷的交互式图表。服务器可以提供渲染图形所需的数据点的 json 提要。我不知道可用的工具，但我见过一些非常酷的图形演示，这些演示是通过客户端方法在没有闪存的情况下构建的。
作为替代方案，您可以预先渲染用户可能会查看的一堆图形图像，然后在用户与图形交互时获取这些图像。如果图表不经常更改并且用户所做的更改数量很小，那么这可能会起作用，但每次图表更改时都必须重新渲染。
It seems like an approach that fits what you are trying to do might be to use svg in the browser an/or javascript. I think most of the modern browsers support SVG and would allow you to do some pretty cool interactive graphs. The server could provide a json feed of the datapoints needed to render the graph. I don't know off hand the tools that are available, but I've seen some pretty cool graph demos constructed without flash through client-side approaches.
As an alternative, you could pre-render a bunch of graph images that the user would likely view and then just fetch those as the user interacts with the graph. This might work if the graphs don't change that frequently and if the number of alterations that the user would make is small, but you'd have to re-render every time the graph changes.
不久前我已经做了你想做的事。背景是一个粗糙的销售队伍模式的可视化。
首先，graphviz 只适合绘图，而不适合绘图。你可以生成 SVG，但经过大量（结果是徒劳的）努力后，我无法让它与 IE 一起使用。
我确实发现这个 Java Applet ZGRViewer 就足够了，虽然小程序对我来说有点过时，它在跨浏览器上运行得很好。
我基本上手动编写了一个调用服务的进程，该服务生成点文件并运行它们（点，是思考？） - 可视化小程序读取本机点文件格式。
我还遇到了一些我对 V2 的想法（从未发生过） - 它是 AJAX 控制工具包的一部分 - 海龙.
如果你想看 ASP.NET 中的代码，我可以发布它。
I've did what you are trying to do not too long ago. The context was visualizing a gnarly SalesForce schema.
First thing, graphviz is only good for plotting, not really for drawing. You can generate SVG, but I could not get it to work with I.E. after a considerable of (what turned out to be fruitless) effort.
I DID find this Java Applet ZGRViewer to suffice, and while applets feel a bit dated for my taste, it worked very well cross browser.
I basically hand coded a process invoking service that generated the dot files and ran them thought (dotty, is think?) - the visulazation applet reads the native dot file format.
I also came accross something that I thought about for a V2 (which never happened) - it is part of the AJAX control toolkit - Seadragon.
If you want to see the code in ASP.NET, I can post it.