我已经使用pygraph定义了一个数据结构。我可以PNG
使用graphviz
.
我想以图形方式显示数据,但使图中的每个节点都可点击。每个节点必须链接到不同的网页。我将如何处理这个?
我想要的是:
href
为每个节点分配一个- 将所有图形显示为图像
- 使图像中的每个节点都可点击
- 事件工具提示
hover
:每当光标位于边缘/节点的顶部时,应显示工具提示
我相信 graphviz 已经可以将图像输出为地图以在 html 中使用。
查看此文档或此文档以了解如何告诉 graphviz 输出要使用的坐标图。它甚至会附加您指定的 url,甚至还有一个版本只使用矩形来映射链接
编辑:
您还可以查看LanyeThomas 的这份文档,其中概述了基本步骤:
使用所需的链接信息创建一个 GraphViz 点文件,可能使用脚本。
运行一次 GraphViz 以生成图形的图像。
再次运行 GraphViz 以生成图形的 html 图像映射。
创建一个 index.html(或 wiki 页面),带有图形的 IMG 标记,后跟图像地图的 html。
将图像映射 url 指向带有每个节点名称的 Wiki 页面 - 如果需要,自动生成 Wiki 页面。
或者,直接链接到 DoxyGen 生成的类层次结构图像。将 Wiki 页面链接到任何其他文档,包括 DoxyGen 文档、图像等。
您可以使用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] ...
您可以使用点击地图:
<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>
您显然必须以某种方式找出坐标。
编辑: 您也可以使用矩形或多边形作为形状属性。我认为您还可以向区域元素添加鼠标悬停或标题属性。
更多编辑: 或者您可以制作可以集成到 html5 DOM 中的 graphviz 输出 svg。我的意思是您可能能够将图表中的元素作为 DOM 对象来处理。
如果您正在寻找一个 graphviz 替代品,也许您可以使用jsPlumb Library。在此处查看一些示例