7

我已经使用pygraph定义了一个数据结构。我可以PNG使用graphviz.

节点图

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

我想要的是:

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

4 回答 4

7

我相信 graphviz 已经可以将图像输出为地图以在 html 中使用。

查看此文档文档以了解如何告诉 graphviz 输出要使用的坐标图。它甚至会附加您指定的 url,甚至还有一个版本只使用矩形来映射链接

编辑:

您还可以查看LanyeThomas 的这份文档,其中概述了基本步骤:

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

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

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

创建一个 index.html(或 wiki 页面),带有图形的 IMG 标记,后跟图像地图的 html。

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

或者,直接链接到 DoxyGen 生成的类层次结构图像。将 Wiki 页面链接到任何其他文档,包括 DoxyGen 文档、图像等。

于 2013-01-30T15:20:08.367 回答
5

您可以使用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] ...
于 2015-04-16T09:19:11.330 回答
1

您可以使用点击地图:

 <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 对象来处理。

于 2013-01-30T14:55:42.803 回答
-3

如果您正在寻找一个 graphviz 替代品,也许您可​​以使用jsPlumb Library。在此处查看一些示例

可以查看 JavaScript InfoVis Toolkit

于 2013-02-16T19:08:52.423 回答