22

クリックしてグラフ内の各ノード/エッジの詳細情報にアクセスできるハイパーリンクを使用してグラフを生成する方法を見つけようとしています。私は、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 リンクで機能するはずであると記載されていますが、うまくいきませんでした。

4

1 に答える 1

30

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"、画像をマップにリンクすることです。

画像と地図を一緒に提供する HTML ページの例については、このページも参照してください。

Url を使用する別の形式はSVGです。

dot -Tsvg example1_graph.dot -o test.svg

ブラウザで開くtest.svgと、URL を含むノードをクリックできます。

(ところで、用途によっては、URL の前に を付けたい場合がありますhttp://)

于 2013-04-05T18:43:47.717 に答える