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

Question

我已经使用pygraph定义了一个数据结构.我可以像PNG使用一样轻松地显示数据graphviz.

我想以图形方式显示数据,但可以使图中的每个节点都可以点击.每个节点必须链接到不同的网页.我该如何处理？

我想要的是:

1. href为每个节点分配一个
2. 将所有图形显示为图像
3. 使图像中的每个节点都可单击
4. hover事件的工具提示:只要光标位于边/节点的顶部,就应显示工具提示

Answer 1

我相信graphviz已经可以输出一个图像作为在html中使用的地图.

检查该文档或这一块如何告诉graphviz的输出坐标地图使用.它甚至会附加你指定的url,甚至还有一个版本只使用矩形来映射链接

编辑:

您也可以通过LanyeThomas 查看本文档,其中概述了基本步骤:

使用所需的链接信息创建GraphViz点文件,可能使用脚本.

运行GraphViz一次以生成图形的图像.

再次运行GraphViz以生成图形的html图像映射.

创建一个index.html(或wiki页面),其中包含图形的IMG标记,然后是图像映射的html.

将图像映射URL指向具有每个节点名称的Wiki页面 - 如果需要,自动生成Wiki页面.

(可选)直接链接到DoxyGen生成的类层次结构图像.将Wiki页面链接到任何其他文档,包括DoxyGen文档,图像等.

Answer 2

您可以使用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 3

如果您正在寻找 graphviz 替代品，也许您可​​以使用jsPlumb Library。在这里查看一些示例

另请查看JavaScript InfoVis 工具包