1

I'm creating a scenario where I create a graph from an XML file (nodes+edges). The graph is being generated as an SVG inside an iframe. What I want to do is to be able to click on a node and have that node focused (different colour, scrolled into position).

What I've got is that I'm passing a URL in the attributes passed to graphviz that has the focus node in the query string so my-url.php?focus=2 will focus node id 2. Then, during attribute creation, I change the color of the focus node to bright yellow.

The problem is that I can't find a way to scroll down to this node. I have to manually search for the node by scrolling down. Is there a way I can get the coordinates of the node in focus and pass it to the window hosting the iframe? That way, I would be able to use Javascript to scroll down (or right).

Any ideas? I'm not looking for a complete solution. I can live with a strategy if it's feasible (and would work on the latest browsers. It doesn't have to be backward compatible).

Thanks.

recluze
  • 1,920
  • 4
  • 21
  • 34

1 Answers1

2

You can retrieve the position of the nodes in the SVG by calling dot without the -T option (it produces the dot file where nodes are annotated with a "pos" attribute indicating where they are drawn. Then, when $_GET['focus'] is 42 (ie. my-url.php?focus=42 is requested), my-url.php should produce Javascript code which will scroll the iframe to the position of node 42, using something like scrollTo (http://stackoverflow.com/questions/1192228/scrolling-an-iframe-with-javascript).

To ensure that this works even if the image has been scaled (it's SVG, right), you would need to multiply the position to which you scroll by the ratio between the total width of the SVG and the width of the dot drawing as set by the "size" graph attribute (same thing for height).

a3nm
  • 8,717
  • 6
  • 31
  • 39
  • I'm currently using Image_Graphviz for creating the SVG ... so I'm not calling the dot command at all. Maybe I can use the same options and pass them directly to dot to create the dot file separately. In that case, I will have to run the graph generation twice. – recluze Apr 22 '11 at 10:42
  • I think you should first generate the annotated dot, and then generate the SVG from this. Thus, the real graph drawing computation only takes place at the first step; at the second step, Graphviz should just use the position info that is already there. (There might be an option to toggle if it doesn't do that spontaneously.) With Image_Graphviz, it looks like what you want is the fetch method with $format = 'dot'. – a3nm Apr 22 '11 at 14:05
  • Ah, so I generate the dot file first (using output = 'dot' of the image() function) and then after doing whatever's needed for the position, I render the file using renderDotFile() function. Perfect. Thanks a lot. – recluze Apr 23 '11 at 06:09