Performance issues with D3 force graph

[Ronan Burke]

Hi there,

I recently forked a D3 repo (https://github.com/eisman/neo4jd3) to create this one: https://github.com/BurkusCat/r6-operator-counters 

However, the framerate of the graph is incredibly poor (sub-20fps on my machine). You can see it here at https//www.r6counters.com/

Compared to this layout made with d3: https://bl.ocks.org/almsuarez/4333a12d2531d6c1f6f22b74f2c57102 which has more nodes and relationships yet is buttery smooth.

I have tried:

• removing the .svg images on the nodes
• removing transparency from the .svg lines
• commenting out tickRelationshipsOutlines()
• removing bi-directional relationships

I've not been able to debug what is causing the performance to dip so badly. Any help or guidance would be much appreciated.

Thanks,

Ronan

Other examples of faster graphs:

https://beta.observablehq.com/@mbostock/d3-force-directed-graph

http://mbostock.github.io/d3/talk/20111116/force-collapsible.html

[Ronan Burke]

Apologies if it is rude to bump this but I have no idea where to go with this. Any direction would be much appreciated!

[Darren G]

Do you have a GPU? Hardware acceleration enabled?

The reality is unbendable. Force feedback layouts are compute intensive. 

One thing I've done is compute the layout off canvas and only draw it when the user sees it. Or run the layout off canvas for a fixed number of iterations and display the result. However the final display wont be interactive.

Lastly you can write your own FFB layout algorithm or borrow one from another source and use it. Some are faster than others. The D3 one I'm sure is just for example purposes. 

If you have more than a couple dozen nodes it's just not going to perform what you expect. 

On Tue, Jan 29, 2019, 1:14 PM Ronan Burke <burk...@gmail.com wrote:

Apologies if it is rude to bump this but I have no idea where to go with this. Any direction would be much appreciated!

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Russell Jurney]

Past a certain scale, you can't do force directed layouts of graphs on a web client. In LinkedIn InMaps we created a render farm, which today would use something like Gephi Toolkit, to do the layouts on a back end server. Then take the x/y coordinates and deliver them to the client. Pub/sub works here for larger networks, and can often take only a short time but scales to larger render times with a scrollbar.

The other problem for scaling is lots of spline edges. Straight edges are fine, the curves don't scale. We were unable to display them all for large networks (up to 1,500 LinkedIn members), so we rendered the edges in an images and only displayed them as SVG when they were clicked or highlighted in the application. We did draw all the nodes in SVG.

There are GPU accelerated layouts for browsers, but I've been unable to make them look even reasonable compared to d3... as of a couple years ago. For large networks, a back-end system is simply required.

 

Russell Jurney @rjurney russell...@gmail.com LI FB datasyndrome.com