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.

Laundryman

Can you provide a sample of your DOT generated SVG? – Phelgon

@Phelgon Of course. I have to deal with something having nodes and edges such as the one in this gist gist.github.com/1223221 I just found canviz is able to deal directly with dot files, do you think it would be easier to add interactivity to a SVG element o to a canviz graph? – Laundryman

That's good question ... did you figure the best answer ? Actually what I would like to do is reduce/exand graphviz clusters by clicking on them, from the web browser. Any idea ? – Macready

@Stéphane I'm starting a series of post on my blog covering the topic but unfortunately I don't have too much time to write them wishlabs.blogspot.com/2011/09/… I think my approach is good to add additional information, to manipulate colors and to show/hide nodes and arcs but I don't think it is going to be too effective if you have to change the layout of the graph. For that try a javascript graph visualization library, I guess it is going to serve better your purposes. – Laundryman

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.

Phelgon

Thanks, actually I can inline SVG on the web-page so that should be enough. The main issue is related to the fact that I don't have meaningful id attributes. What would be meaningful for me is the svg:title, is it possible to get the element having a specific title (Maybe with jQuery)? – Laundryman

It seems I can get SVG with meaningful identifiers: graphviz.org/content/preservation-dot-id-svg – Laundryman

Awesome. You should repost in your question with what you came up with and your process. I'd be interested to see. – Phelgon

Sure, as soon as I come up with something working I'll keep you up to date. I was planning to do it on the weekend but I didn't managed to do it :) – Laundryman