Question

我正在尝试弄清楚如何使用超链接生成图表，您可以单击该图表以访问图表中每个节点/边缘的更多详细信息。我发现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链接，但我没有运气。

Answer 1

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"，它将图像链接到地图。

另请参阅this page，了解提供图片和地图的html网页示例。

使用Url的其他格式为 SVG ：

dot -Tsvg example1_graph.dot -o test.svg

如果您在浏览器中打开test.svg，则可以点击包含网址的节点。

（顺便说一句，根据您的使用情况，您可能希望使用http://为网址添加前缀<）

graphviz嵌入式网址

1 个答案: