Network graph in javascript, possible with jQuery alone?

Question

I need to implement a particular network graph in javascript. I've looked at InfoVis Toolkit and Protovis, but I'd have to implement a custom layout for them and a lot of custom code. I'm not sure they add much value. This widget needs to be super efficient as it will go on many highly visited webpages, I don't want the widget slowing anything down.

The nodes of this graph are html-rich. Dropdowns, input elements, popups, etc. So div's make a lot of sense for each node. I could simply create the divs in javascript using AJAX to read the data from my server. Implement the layout mechanism in javascript and animate everything when adding/updating/deleting nodes through jQuery.

The only thing I can think of preventing me from only using jQuery is the connections between the nodes. How do I draw them? I might be able to use something like Raphael underneath the nodes and coordinate between the node positions and Raphael, but after very briefly looking at Raphael, it looks tricky.

Is there another simpler way to draw the connections between the nodes? IE support is important at least for IE8. Preferably the lines can be curved and patterned (dotted lines, double lines, etc) to represent different types of connections.

UPDATE: I don't mind paying for a solution, like mxGraph which was suggested. The solution so far, which exists only in mind, is to create transparent PNG images of the various connections. Since the nodes in my situation are in somewhat of a grid, there's a maximum number of different connection images (will be pretty large though) and since they're transparent, they can be layered on top of each other. Make sense?

Answer 1

This is exactly what mxGraph is designed to do (I do work on the product), but the question is whether you want an open source solution or not. mxGraph can be used under a free academic license if that is the intended usage.

Answer 2

You could do the entire graph with RaphaelJS rather than trying to just do the connections with it, that should be a lot simpler than trying to only use it for the connections. A couple of the demos are similar to what you describe (though, being demos, a lot simpler). This one shows dragging nodes around, with their connections staying attached. This one shows mouseover integration. Doesn't look like any of the main demos features showing a popup in response to a click, but the concept is there.

The Raphael objects are DOM elements, so there's no problem with attaching handlers to them for your behaviors (e.g., having a click on one of the nodes bring up a menu, that kind of thing), and in fact Raphael provides some convenience functions for doing that cross-browser.