NaN on Force-Directed Layout Append in D3.js

Question

I'm using a force-directed layout in D3 that grabs data from a JSON file and then, when one of the nodes is double-clicked, queries the database to find links to that node and updates the links and nodes arrays attempting to append the new data to the viz. It seems when the nodes are appended without links, they work fine, but the links to the xy coordinates end up being NaN. You can see the effect here, just double-click on one of the nodes:

http://blockses.appspot.com/2432083

Answer 1

I fixed this by rewriting the code to follow the force-directed with append example from Bostock. The problem seems to occur when you overwrite your nodes and links arrays rather than pushing data to them, in case anyone runs into similar issues.

The updated code is in the original gist and can be seen here:

http://blockses.appspot.com/2432083

Answer 2

Old post, but I also hit this issue and my solution was different.

I figured out when I was setting the size of the force layout :

networkViewerVariables.force = d3.layout.force()
        .gravity(.05)
        .distance(50)
        .charge(-50)
        .size([forceWidth, forceHeight])

The 'forceWidth' and 'forceHeight' variables were null. When I populated these, the errors were gone.

Hope that helps someone :)