Clever Geek Handbook

D3js strong force direction

I am in a situation to create a force benchmark plot with several thousand nodes.

As you can guess, the interactive simulation is slow and the browser will freeze, which is also mentioned in other posts .

However, I don't need a static force oriented graph, and I still need to manipulate the graph with force between nodes to have a good layout. I don't care about the fluidity of the modeling. My goal: 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 timeframe for rendering node positions can be longer.

I was thinking about hosting a node position calculation in node.js. Many articles are about server side d3 graph pre-rendering, but I need all simulation calculations to be done server side, and interaction with external users. Thus, I probably need to register listeners in drag, zoom, mouse modes in node.js.

I'm not sure if there is an easy way to do this.

+2


source to share


1 answer


How to try one of these two options:



  • Pre-configure the force layout on the server, and on the client side, run d3.layout.force () again. Since the nodes will already be laid out, it won't take long or slow down the browser. Then, do you register the listeners you need?

  • On the server, generate a graph with layout and event binding by binding it to the DOM DocumentFragment

    . You pass this structure to the client with your client-side javascript and attach it to the browser's DOM.

+1


source






More articles:


All Articles