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

Question

我使用pygraph定义了一个数据结构。我可以使用PNG轻松地将这些数据显示为graphviz。

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

我想要的是：

1. 为每个节点分配href
2. 将所有图表显示为图像
3. 使图片中的每个节点都可点击
4. hover事件的工具提示：每当光标位于边/节点顶部时，都应显示工具提示

Answer 1

我相信graphviz已经可以将图像输出为用于html的地图。

检查this doc或this one，了解如何告诉graphviz输出要使用的坐标图。它甚至会附加你指定的url，甚至还有version只使用矩形来映射链接

编辑：

您还可以查看LanyeThomas的this document，其中概述了基本步骤：

  

使用所需的链接信息创建GraphViz点文件，   也许用脚本。

     

运行GraphViz一次以生成图像   图形。

     

再次运行GraphViz以生成图表的html图像映射。

     

使用图表的IMG标记创建index.html（或wiki页面），   接下来是图像映射的html。

     

将图片地图网址指向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

您可以使用点击地图：

 <img src="graph.png" width="400" height="300" usemap="#mygraphmap">

<map name="mygraphmap">
  <area shape="circle" coords="100,100,30" href="f8a08.htm">
  <area shape="circle" coords="200,100,30" href="1d0f.htm">
</map>

你显然必须以某种方式找出坐标。

编辑： 您还可以使用rect或polygon作为shape属性。 我想你也可以在区域元素中添加mouseover或title属性。

更多编辑： 或者你可以制作graphviz输出svg，它可以集成在html5 DOM中。我的意思是你可以将图形中的元素作为DOM对象来处理。

Answer 4

如果您正在寻找graphviz替代方案，可以使用jsPlumb Library。查看一些samples here

同时结帐JavaScript InfoVis Toolkit