Menu
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-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.
369
Create a graph object, assemble the graph by adding nodes and edges, and retrieve its DOT source code string. Save the source code to a file and render it with the Graphviz installation of your system. Use the view option/method to directly inspect the resulting (PDF, PNG, SVG, etc.) file with its default application.
neato is a reasonable default tool to use for undirected graphs that aren't too large (about 100 nodes), when you don't know anything else about the graph. neato attempts to minimize a global energy function, which is equivalent to statistical multi-dimensional scaling.
Go to the downloads page of Graphviz, and download the executable for Windows (depending on your PC type, 64-bit or 32-bit). Run the .exe file. You will be asked whether you want to add graphviz to the system PATH. Either select the option for 'ALL Users' or 'Current User'.
Graphviz consists of a graph description language named the DOT language and a set of tools that can generate and/or process DOT files: dot. a command-line tool to produce layered drawings of directed graphs in a variety of output formats, such as (PostScript, PDF, SVG, annotated text and so on). neato.
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-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://)
120
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
