graphviz嵌入式网址 [英] graphviz embedded url

问题描述

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

 图G {
 node [label =\N]; 
图形[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 =Gname =G> 
< area shape =polyhref =google.comtitle =boot&＃45; masteralt =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.pngusemap =＃Galt =graphviz graph/> 
<！ -  graphviz生成的地图 - > 
< map id =Gname =G> 
< area shape =polyhref =google.comtitle =boot&＃45; masteralt =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的节点是可点击的。

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

I'm trying to figure out how to generate a graph with hyperlinks you can click to access more detailed information on each node / edge in the graph. I found that graphviz has this ability using the URL node property. Using my test file...

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"];
}

... I was able to generate a cmapx file that seems to contain some useful info:

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

Here was the command I used to generate this:

dot -Tcmapx example1_graph.dot -o test.cmapx

However I'm not sure how to use this file? The documentation for graphviz also mentions the ps2 format should work for URL links but I didn't have any luck.

解决方案

The map created by graphviz can typically be used in a HTML page.

The idea is to run graphviz twice: once to create the map, and once to create the image.

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

Then the image is served in a HTML page together with the map. The syntax would be something like this:

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

The important part being usemap="#G" which links the image to the map.

See also this page for an example of a html page serving image and map together.

---

An other format making use of the Url is SVG:

dot -Tsvg example1_graph.dot -o test.svg

If you open test.svg in a browser, nodes containing URLs are clickable.

(Btw, depending on your use, you may want to prefix URLs with http://)

这篇关于graphviz嵌入式网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！