在HTML页面中可点击的图形可视化

Question

我用 pygraph 定义了一个数据结构。然后我可以很简单地用 graphviz 把这些数据展示成 PNG 格式的图片。

我想把这些数据以图形的方式展示出来，但希望每个图中的节点都是可以点击的。每个节点都要链接到不同的网页。我该怎么做呢？

我希望能做到以下几点：

1. 给每个节点分配一个 href 链接
2. 把整个图展示成一张图片
3. 让图片中的每个节点都可以点击
4. 在 hover 事件上显示提示框：当鼠标悬停在边或节点上时，应该显示一个提示框

Answer 1

你可以使用 pygraphviz 和 cmapx。

import pygraphviz
my_graph = pygraphviz.AGraph(id="my_graph", name="my_graph")
my_graph.add_node("node", 
                  label="my_node",
                  tooltip="tooltip text \r next line",  # use \r for new line
                  URL="http://ya.ru/",
                  target="_blank")
my_graph.layout(prog='dot')
my_graph.draw(path="my_graph.map", format="cmapx")  
my_graph.draw(path="my_graph.svg", format="svg")

然后在 HTML 中使用 my_graph.map 的内容。

<IMG SRC="my_graph.svg" USEMAP="#my_graph" />
... [content of my_graph.map] ...

Answer 2

我觉得graphviz已经可以输出一个图像，作为在html中使用的地图了。

你可以查看这个文档或者那个文档，了解如何让graphviz输出一个坐标地图。它甚至会把你指定的链接地址加上去，还有一个版本，只使用矩形来映射链接。

补充：

你还可以查看这份文档，作者是LanyeThomas，里面概述了基本步骤：

创建一个包含必要链接信息的GraphViz dot文件，可能需要用到脚本。

运行GraphViz一次，生成图的图像。

再运行GraphViz一次，生成图的html图像地图。

创建一个index.html（或者wiki页面），里面包含图的IMG标签，后面跟着图像地图的html。

把图像地图的链接指向一个Wiki页面，页面上有每个节点的名称——如果需要，可以自动生成这些Wiki页面。

可选地，直接链接到DoxyGen生成的类层次结构图像。让Wiki页面链接到任何额外的文档，包括DoxyGen文档、图像等。

Answer 3

如果你在找一个可以替代graphviz的工具，可以试试jsPlumb库。这里有一些示例供你参考。

另外，也可以看看JavaScript信息可视化工具包。