SVG / Raphael, how does one implement the DOT algorithm in javascript? (Graph organization)

My fiddle: http://jsfiddle.net/G5mTx/10/

As you can see, the current way I'm organizing the nodes does no balancing, and there is some overlap when parent nodes have more than 1 child node.

For those not familiar with the DOT algorithm, a brief, vague explanation can be found here: http://www.ece.uci.edu/~jhahn/pdf/dot.pdf

Basic开发者_StackOverflow中文版ally, DOT organizes the nodes such that the graph is optimal, which means that it is concise, has minimal line crossing, and is balanced.

I've heard of some people running the DOT algorithm server side before sending it to the client... which would be consistantly faster... but I need each of the nodes to have hover and click states, as I plan on allowing the user to re-assign where the arrows / lines point.

I mean, I COULD do the SVG generation server-side.. but then how would I hook up hover / click events to the nodes, and have the tell the server which Model the node represents upon line re-assignment?

Note: My server runs Ruby on Rails 2.3.8

I struggled with exactly this situation and ran the DOT algorithm on my server, sending only the new coordinates for the nodes back to the browser. Ultimately I found the setup unsatisfactory.

I switched to using D3's force layout algorithm, which is implemented in Javascript and appears to be more modern than DOT's, and now I'm much happier.