graphviz嵌入式网址

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"图像链接到地图的重要部分.

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

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

dot -Tsvg example1_graph.dot -o test.svg

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

(顺便说一下,根据您的使用情况,您可能需要为URL添加前缀http://)