22

我试图弄清楚如何生成带有超链接的图形，您可以单击以访问有关图形中每个节点/边的更多详细信息。我发现 graphviz 使用 URL 节点属性具有这种能力。使用我的测试文件...

graph G {
    node [label="\N"];
    graph [bb="0,0,218,108"];
    king [pos="31,90", width="0.86", height="0.50"];
    lord [pos="31,18", width="0.81", height="0.50"];
    "boot-master" [URL="google.com"];
    king -- lord [pos="31,72 31,61 31,47 31,36"];
}

...我能够生成一个似乎包含一些有用信息的 cmapx 文件：

<map id="G" name="G">
<area shape="poly" href="google.com" title="boot&#45;master" alt="" coords="297,29 292,22 279,15 258,10 233,7 204,5 175,7 150,10 129,15 116,22 111,29 116,37 129,43 150,49 175,52 204,53 233,52 258,49 279,43 292,37"/>
</map>

这是我用来生成它的命令：

dot -Tcmapx example1_graph.dot -o test.cmapx

但是我不确定如何使用这个文件？graphviz 的文档还提到 ps2 格式应该适用于 URL 链接，但我没有任何运气。

4

1 回答 1

30

graphviz 创建的地图通常可以在HTML 页面中使用。

这个想法是运行 graphviz 两次：一次创建地图，一次创建图像。

dot -Tcmapx example1_graph.dot -o test.cmapx
dot -Tpng example1_graph.dot -o test.png

然后图像与地图一起在 HTML 页面中提供。语法是这样的：

<img src="/test.png" usemap="#G" alt="graphviz graph" />
<!-- graphviz generated map -->
<map id="G" name="G">
    <area shape="poly" href="google.com" title="boot&#45;master" alt="" coords="297,29 292,22 279,15 258,10 233,7 204,5 175,7 150,10 129,15 116,22 111,29 116,37 129,43 150,49 175,52 204,53 233,52 258,49 279,43 292,37"/>
</map>

重要的部分是usemap="#G"将图像链接到地图。

另请参阅此页面以获取同时提供图像和地图的 html 页面的示例。

使用 Url 的另一种格式是SVG：

dot -Tsvg example1_graph.dot -o test.svg

如果test.svg在浏览器中打开，包含 URL 的节点是可点击的。

（顺便说一句，根据您的使用情况，您可能希望在 URL 前加上http://）

于 2013-04-05T18:43:47.717 回答