Problems adding and removing nodes in a force-layout using d3.js

Question

I am trying to visualize the server availability (and later other things, once this works) by fetching data from the Zabbix API. You can see an example on how the data returned looks like [here][1] in the Zabbix API Documentation.

Getting the data is not the problem, but I am having some trouble with d3.js's data joining I think, or rather how I am supposed to do this.

After fetching the data I get a array of servers sorted alphabetically, and I want the new servers to appear, the ones removed to just disappear and any changes in availability (or otherwise - in the future) to be reflected with color or whatever else I might think of.

The point is that the graph shouldn't re-initialize, it should just be updated by adding or removing nodes.

Which is the bit I am having problems with. I have managed to add more and more nodes to the list (never clearing it), I have managed to get them to "redraw" each time I fetch new data, i.e all the nodes are added again, and snap to the center like they first do when you load the page.

And the third which has resulted in all the nodes being stuck in the top left corner.

The latter which is the current state of my code.

I am a bit unsure what I am doing wrong at this point, I was looking at this which seems to be fairly close to what I need, without the links anyway (for now). That works fine, and I've tried to replicate that behavior in my code, - yet it does not work.

I would appreciate it if someone had some pointers for me, that would be awesome. I have been playing with this at work for the past week without getting much further :)

Thanks!

Because I only have access to Zabbix at work I am really only able to test things in the 16-21 time period CET time, which is for about another 4~ hours today. If anyone have any suggestions during the night I will try it out tomorrow :D

My code on GitHub will be in a link below my post, since this lack of reputation on this site has put me in a gloomy hole where I can only add two links to my post.

Why isn't this global? I have more than 10 rep on other SE sites..

Edit:

Still having trouble, every time the data is refreshed the circles "enter" like they do when you first load this: http://mbostock.github.com/d3/talk/20111018/collision.html No idea what to do now :/

Answer 1

What you mention in there is the default behaviour of D3. When you add nodes they will be inserted in the upper left corner. You can change this behaviour by writing your own placement method and directly setting the X and Y of each node when you add it to your force directed graph.

The trick is to apply this algorithm:

1) calculate the limits of the viewport (say the limits of your drawing area - 20) and use the tricks from the force directed bound example ( http://bl.ocks.org/1129492 )

2) then for each visualization tick do this: calculate forces to keep nodes in viewport

3) the algorithm to keep node in viewport would be something along these lines: for each node calculate X and Y according to the forces that can be applied on the 4 directions (top left, bottom left, top right, bottom right) - if it's closer to upper left then you will set X and Y accordingly....anyway it will not be outside the screen....

Another trick would be to set up the root node in the center (see this post: How do I set the focal node in a D3.js Force Directed Graph?). That would help stabilize your graph. Another advice would be to try to not mix ajax calls with your redraws. Ideally use some callbacks and call redraw when data is loaded, otherwise you will end up with spaghetti code (it's not unusual for force directed graphs to be larger than 1000 lines).

Hope it helps.