Interactive Oriented Graphics with SVG and Javascript

Question

I need to add some interactive features to oriented SVG graphs.

So far, the graphs that I want to show are generated from a points file and displayed as SVG. I would like to know if there is an easy way to add interactivity (possibly with Javascript) to such SVG documents.

I need to display some information when the mouse moves through the node and so that two nodes can be compared.

Since my models are generated automatically, I would prefer to save the dot SVG created and add additional information using a separate Javascript.

Answer 1

I have an example with embedded SVG. The difference between this SVG and what you have is that in my demo there are id attributes for nodes and things. I got this SVG from graphviz website.

Demo

(Click "Hello" node)

When I get the opportunity to download SVG on my server, I will try to access the SVG from the inline element. I cannot do this on JSFiddle for the same domain policy in browsers.

This page may also be helpful. It shows some features of SVG scripts, although for all examples the script is in the SVG itself.