2013-04-05 7 views
15

Sto cercando di capire come generare un grafico con collegamenti ipertestuali che è possibile fare clic per accedere a informazioni più dettagliate su ciascun nodo/bordo nel grafico. Ho trovato che graphviz ha questa capacità utilizzando la proprietà del nodo URL. Usando il mio file di test ...url incorporato graphviz

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

... sono stato in grado di generare un file cmapx che sembra contenere alcune informazioni utili:

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

Qui è stato il comando che ho usato per generare questo:

dot -Tcmapx example1_graph.dot -o test.cmapx 

Tuttavia, non sono sicuro di come utilizzare questo file? La documentazione di graphviz menziona anche che il formato ps2 dovrebbe funzionare per i collegamenti URL ma non ho avuto fortuna.

risposta

18

La mappa creata da graphviz può essere in genere utilizzata in una pagina HTML .

L'idea è di eseguire graphviz due volte: una volta per creare la mappa e una volta per creare l'immagine.

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

Quindi l'immagine viene pubblicata in una pagina HTML insieme alla mappa. La sintassi sarebbe qualcosa di simile a questo:

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

La parte importante è usemap="#G" che collega l'immagine alla mappa.

Vedere anche this page per un esempio di una pagina html che serve l'immagine e la mappa insieme.


Un altro formato utilizzando l'URL è SVG:

dot -Tsvg example1_graph.dot -o test.svg 

Se si apre test.svg in un browser, i nodi che contengono URL sono cliccabili.

(Btw, a seconda del vostro uso, si potrebbe voler anteporre gli URL con http://)

+3

Grazie, grande spiegazione! Il consiglio su come visualizzare i file .svg in un browser era esattamente ciò di cui avevo bisogno. –