问题
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.
回答1:
How about trying one of these two options:
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?
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.
来源:https://stackoverflow.com/questions/23294600/d3js-large-force-directed-graph-server-side-simulation