d3js large force-directed graph server side simulation

Question

I am in the situation to create a force-directed graph with couple of thousands nodes.

As you may guess, the interactive simulation is slow, and the browser will be frozen,as also mentioned in other posts.

However, static force-directed graph is not enough for me, and I still need to manipulate the graph with force between nodes to have nice layout. I don't care much about smoothness of simulation. My goal is: 1. the browser will not be frozen; 2. I can drag a node from one place to another with force between nodes for each tick. And, the time interval to visualize node positions can be longer.

I was thinking about putting the node position calculation in node.js. Many articles about pre-rendering d3 graph on the server-side, but I need all simulation calculation be done on the server-side, with the interaction with front-end users. So, I probably need to register listeners to "drag", "zoom", "mouseover" actions in node.js also.

I am not sure whether there is an easy way to do this.

Answer 1

How about trying one of these two options:

1. Pre-render the force layout on the server, and on the client side, you re-run d3.layout.force(). Because the nodes will be already layed-out, it won't last long, and won't freeze the browser. Then you register the listeners you need?

2. On the server, generate the graph with its layout and events binding, attaching it to a DOM DocumentFragment. You pass this structure to the client with your client-side javascript, and attach it to the browser DOM.