CODEWITHSUNDEEP
javascriptsvgd3.jsforce-layoutgraph-visualization
arjun010
arjun010

Reputation: 139

Force Directed Graph with expand and collapse (d3.js)

I am trying to generate a Force Directed network using d3. The dataset is a list of alliances between companies and looks like this:

[ { "company1":"Microsoft", "company2":"Qualcomm Inc." }, { "company1":"Microsoft", "company2":"Qualcomm Inc." },...]

The key features of the visualization include:

  1. Double clicking a node (i.e. a company) should expand/collapse its network. (Expanded nodes are indicated by blue and non-expanded nodes by gray).
  2. Hovering over a node highlights the node and its partners.
  3. When collapsing a node, if a partner has other links active on screen or is expanded, that link should not be terminated and that partner should not be removed.

What I have working: All the functionality mentioned above

What is the issue: Currently, I am refreshing the whole visualization and redrawing it every time a new node is added or expanded/collapsed. While doing this, some of the nodes go to the top left corner of the screen and I keep getting an error:

error: Invalid value for <g> attribute transform="translate(NaN,NaN)" d3.v3.min.js:1    
Error: Invalid value for <line> attribute x2="NaN" d3.v3.min.js:1    
Error: Invalid value for <line> attribute y2="NaN" d3.v3.min.js:1    
Error: Invalid value for <g> attribute transform="translate(NaN,NaN)"....

I have referred to other questions with this issue but unfortunately am not able to understand why exactly is this happening in my case. I have observed this happens generally when the current node(s) on the screen are still moving and I add/remove nodes on screen.

Here is the fiddle link for the currently working code: http://jsfiddle.net/bmp7qnx0/4/

(I realize "refreshing" a visualization is not the right way of doing it and I am working on the code for the non-restart based implementation and am facing some issues with that code too - I will post the fiddle link for the same if required soon). I have used a 5 second timeout as a work around based on my observations for this issue for now.

For now, if someone could refer the fiddle I have provided and tell me what exactly is causing the error and if there is some way to make the visualization work without breaking using the "re-draw" logic, I would really appreciate it.

Upvotes: 0

Views: 1851

Answers (1)

arjun010
arjun010

Reputation: 139

Solution:

Just in case this helps anyone who bumps into a similar problem: I was re-using my force layout object when I load new nodes/links. It turns out that the tick timer was still firing. Calling force.stop() to turn it off when loading new data fixed the problem.

Upvotes: 2

Related Questions