CODEWITHSUNDEEP
javascriptsvgd3.js
zuzzy
zuzzy

Reputation: 311

Updating D3 force layouts - adding and removing nodes corrupt the page

First of all apologies to all for effectively opening a duplicate question to my last one (D3: problems with node = vis.selectAll(".node")) but initially I thought I could do this would jsfiddle, however it never really worked.

The two problems are the same, so it might be worth reading the other one before this one.

The issue I have is in updating the force layout with new nodes. In reality, I have an ajax call every few seconds to get updated data and I have reams of code to parse it and work out what changes, and either add new nodes to by node array (creatively called nodeArray) and new links to my link array (called linkArray). I also confuse things a bit by having text labels as nodes, also within nodeArray, with links to their respective node in linkArray.

This time rather than try to describe the issue, I have created two near identical fiddles:

a) adding a node - this fiddle parses the original data, then after 5 seconds adds a node. (http://jsfiddle.net/zuzzy/dFd3H/2/)

b) removing a node - this fiddle parses the original data, then after 5 seconds removes a node. (http://jsfiddle.net/zuzzy/wqS3G/1/)

Just look for the following parts of the code:

setTimeout(function () {
//update the objects

...

},5000);

//----- functions for drawing and tick below

function draw() {

....

}

The issue I have is with the complicated way I am approaching this. All the examples I can find either have a static layout using the ideas I have used like text label nodes, or they are dynamic but they just use simple nodes with circles. I actually make it even harder than the fiddles because not only do I use circles and text labels but also I overlay an image over the circles...but that was just too complicated for the fiddle examples. So these fiddles are an extract of my code (which also requires intranet pages so doesnt work anyway on jsfiddle) so apologies if it looks convoluted and contrived.

I know I have done it wrong, and I suspect (hope?) the answer to the problem is the same in both fiddles.

I am also expecting that the issues resides in the draw() function - thats where I feel the issue should be because rather than follow the normal 'create a node object, and interact with that' formula I interact with the svg object ('vis') directly.

The annoying thing is both fiddles work fine for the initial draw. it is the update that breaks both.

Any suggestions?

Thanks

--Chris

Upvotes: 0

Views: 1326

Answers (1)

zuzzy
zuzzy

Reputation: 311

I have answered it myself after a lot of playing. I fixed a fairly major typo in the fiddle that wasn't helping in the add fiddle only, in that I had copied some text from a for loop and not replaced the variable in the loop (in the setInterval, where I add the node to the array)

node_hash[key] = a;

changed to

node_hash["REMOTE"] = a;

That actually wasn't the issue, and didn't affect the remove fiddle. I'm still not sure why it wasn't working before with just references to 'vis' but I reworked the fiddles and now they add and remove fine.

The fixed fiddle for the add is http://jsfiddle.net/zuzzy/fmkC5/5/

The fixed fiddle for the removal is http://jsfiddle.net/zuzzy/wqS3G/3/

Upvotes: 1

Related Questions