graphviz 嵌入网址答案

【问题标题】：graphviz embedded urlgraphviz 嵌入网址
【发布时间】：2013-03-28 01:35:51
【问题描述】：

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

【问题讨论】：

标签： html graphviz

【解决方案1】：

由graphviz创建的地图通常可以用于 html页面。

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

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"。

另请参见987654321 @ for @ 987654321，以获取服务图像和映射的HTML页面的示例。

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

dot -Tsvg example1_graph.dot -o test.svg

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

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

【讨论】：

谢谢，很好的解释！在浏览器中查看 .svg 文件的技巧正是我所需要的。