Creating a graph with draggable nodes

Question

I want to fill in some user data in the browser as a graph of draggable nodes, with each node representing the user and the edges the relationship between them. I figured out the solution (it works): I use draggable divs over HTML5 canvas (divs have a larger z-index than canvas, and are therefore visible). The canvas is then used to draw lines connecting the divs. The problem is that every time a drag event is triggered by a user by dragging a node, the entire canvas needs to be cleared, and all edges need to be redrawn. This leads to flicker, and this, I think, is not the optimal solution. Please note that I am not an HTML / CSS developer, and perhaps my solution is very naive.

I can use any suggestions from you. (3) / HTML (5) Guru. I am open to all kinds of solutions, but would like to avoid the light of Flash / [Silver | Moon].

As an example, I really like the Pearltrees interface, but I don’t have to think it’s a fantasy. I tried to read main.js from my page source, but its gazillion functions, all wrapped in one line each.

Answer 1

You do not need to clean the entire canvas every time it draws. This is simply the easiest way to encode it.

Instead, you can track the lines associated with the moved node, and simply redraw this section by drawing the line with the background color (more complex if the background is not a solid color), then drawing a new line.

You will encounter complications when you have intersecting lines that you need to process. For simplicity, erasing can be done in rectangles, then some math will figure out if you cross other lines, if so, they will also need to be redrawn.

If you want to get really fantasy, you can redraw in a more granular way, but in most cases the rectangles should be sufficient.

Answer 2

I have never done anything like this, but if you can use css3, you can use hr or div with only the top border set, and also resize and rotate it using jquery + css3.