Interactive directed graphs with SVG and Javascript

Question

I have to add some interactive features to SVG directed graphs.

So far the graphs I want to show are generated from a dot file and rendered as SVG. I'd like to know if there is some easy way to add interactivity (Maybe with Javascript) to such SVG documents.

What I need is to display some information when the mouse goes over a node and to make it possible to compare two nodes.

Since my models are generated automatically I would prefer to keep the dot-generated SVG and put on it additional information with a separate Javascript.

Answer 1

I have an example with inline SVG. The difference between this SVG and what you have is that the one in my demo has id attributes for nodes and things. I did get this SVG from the graphviz website.

Demo

(Click on the "Hello" node)

When I get a chance to upload an SVG on my server, I will try accessing SVG from an embed element. I can't do it on JSFiddle do to same domain policy in browsers.

This page may also be of help. It shows some of the scripting capabilities of SVG, although for all of the examples, the script is in the SVG itself.