2013-04-05 95 views
15

私はハイパーリンクを使ってグラフを生成する方法を理解しようとしていますが、クリックするとグラフの各ノード/エッジの詳細情報にアクセスできます。私はgraphvizがURLノードのプロパティを使ってこの能力を持っていることを発見しました。 ...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のドキュメンテーションには、URLリンクで動作するはずのps2形式についても言及されていますが、私は運が全くありませんでした。

答えて

18

graphvizによって作成されたマップは、通常、HTMLページで使用できます。

考えてみましょうgraphvizを2回実行します.1回は地図を作成し、もう1回は画像を作成します。

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ページとマップを一緒に表示します。

dot -Tsvg example1_graph.dot -o test.svg 

ブラウザでtest.svgを開いた場合は、URLを含むノードがクリック可能です:のURLを利用して


他の形式は、SVGです。

(ところで、あなたの用途に応じて、あなたはhttp://でURLをプレフィックスすることもできます)

+3

おかげで、素晴らしい解説! .svgファイルをブラウザで見ることについてのヒントは、まさに私が必要としていたものでした。 –