How to display edges when you click on a node?

Is it possible to display edges only when you click on a node?

Are there event listeners to detect mouse clicks?

Where is the display (visible, hidden) attribute?


re: displaying edges when you click on a node?

This line will make all your edges invisible:
It is possible to display edges only after clicking on (or rolling over) an associated node, but it will take extra effort (programming) by you.
The closest that Graphviz comes to meeting your need  is imagemap/html (see URL & imagemap in the graphviz documentation).  Not attractive if there are lots of nodes, but worth looking at.  You can create a "cleaner" result with custom javascript & slightly modified svg, but this work might take you days or weeks.
In about 6 weeks, I hope to share some software that would help you, but it is not ready today.

Trick to do this, by xml injection

I use URL attribute  to inject some svg attribute as 'onmouseover' into the generated svg file. Wit this I can put some javascript and get a dynamic svg.

I do not understand why graphviz team do not allow svg attributes as described in These attributes could te be used only when output format is svg otherwise is skipped.

That will be a nice feature. see below (that works):


digraph G {
node [rx=5 ry=5];
edge [color="black", minlen="1.3", arrowsize="0.6", style="tapered"];
E [ URL="\" onmouseover=\"'opacity', '0.5');" ];
A -> B -> C;
B -> D ;
D -> E;
C -> E;
A -> D;


How to display edges when you

The simple answer is, No. The Graphviz software is focused on laying out and rendering graphs. The interactive software that is provided either can't do what you want or, like smyrna, can do the operation but not (yet) via a simple mouse click.
With a few lines of scripting and the URL attribute, you can get this feature using any web browser. If you want to avoid this, you will need to see if this feature is available on one of the various Graphviz viewers available at
I should add that one can set style=invis on an edge to make it invisible. And if you are curious about pursuing the browser interface, let me know and I can supply more details.
You also might want to post your query on the mailing list ( as some of the older users read it and someone may have addressed a similar problem.


Thanks Erg for the info.
So, you seem to be saying it is possible to display a Grphiviz graph in a browser? 
That seems like a good solution. Please provide more details.



You can attach a URL attribute to nodes, edges, (sub)graphs, and cells in tables. (Other related attributes are *tooltips, id, *target.) You can then either use -Tsvg to produce SVG output which will have the appropriate links embedded in it, or a combination of a bitmap output with an imagemap. For example, one could run
  dot -Tpng -o x.png -Tcmapx -o x.gv
to produce both a PNG file and a client-side map. You can then use the appropriate HTML to embed them in a web page. More details about this can be found at
Note that the URL and related attributes may contain special characters that are replaced on output. For example, you might have
 node [URL="abc-\N"]
Then, each node will receive the unique URL starting with abc- and with \N replaced by the node's name.
For the specific task you mentioned about only seeing a node's edges when you click on it, you would do a single layout of your graph using -Tdot -Estyle=invis, and with appropriate URLs set in the graph. This will produce the base graph file, say, xxx.gv. Assuming you want to use SVG, you would then run
  neato -n2 -Tsvg -o xxx.svg xxx.gv.
to produce the initial view. The graph is then viewed in a browser, with only the nodes visible. If the user clicks on a node, the URL would start your CGI program and pass in the node name. Your CGI script would then take the node name, say, dwibble, and run
  gvpr -c -adwibble 'BEG_G{node_t r=node($,ARGV[0])} E[$.head == r || $.tail == r]{style=""}' xxx.gv | neato -n2 -Tsvg -o xxx.svg
and feed the new xxx.svg back to the browser. xxx.svg will now show the same graph layout except the edges attached to the node dwibble will be shown.
This is obviously very rudimentary. With additional scripting and the use of javascript, it could be made much more general. I know various people have gone in that direction, as evidenced by the comment of Steve Roush and postings to the mailing list.

Recent comments