Interactive directed graphs with SVG and Javascript - Stack Overflow

admin管理员组

文章数量:1406157

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 pare 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.

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 pare 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.

• javascript
• svg
• visualization
• dot
• directed-graph

Share Improve this question Follow edited Sep 30, 2013 at 18:10 MSalters 181k1111 gold badges168168 silver badges373373 bronze badges asked Sep 16, 2011 at 21:20 mariosangiorgiomariosangiorgio 5,54344 gold badges3434 silver badges4646 bronze badges 4

• Can you provide a sample of your DOT generated SVG? – kzh Commented Sep 16, 2011 at 21:26
• @kzh Of course. I have to deal with something having nodes and edges such as the one in this gist gist.github./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? – mariosangiorgio Commented Sep 16, 2011 at 21:32
• 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 ? – Stéphane Commented Sep 29, 2011 at 13:09
• @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./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. – mariosangiorgio Commented Sep 30, 2011 at 8:51

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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.

本文标签： Interactive directed graphs with SVG and JavascriptStack Overflow