html – graphviz嵌入网址

我试图找出如何使用超链接生成图形,您可以单击以访问图中每个节点/边缘的更详细信息.我发现graphviz具有使用URL节点属性的能力.使用我的测试文件…

graph G {
    node [label="\N"];
    graph [bb="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链接,但我没有任何运气.

解决方法

由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,37"/>
</map>

重要的部分是将图像链接到地图上的usemap =“#G”.

另请参见this page为一个html页面服务图像和映射在一起的示例.

使用Url的其他格式是SVG：

dot -Tsvg example1_graph.dot -o test.svg

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

(Btw,根据您的使用情况,您可能需要使用http：//前缀URL)