

D3.js: Understanding the Force Layout - sxywu
https://medium.com/@sxywu/understanding-the-force-ef1237017d5

======
stared
For understanding D3.js Force Layout parameters in really recommend playing
with
[http://dhs.stanford.edu/dh/networks/](http://dhs.stanford.edu/dh/networks/)

------
pachydermic
Does anyone know of any way to _quickly_ find a steady(ish) state for the
force layout? I have a complicated system with around 500 nodes and way more
directed connections and the performance of rendering that system on our
modest computers is terrible.

A static graph with a sane layout is what I'm after - anyone know of an
efficient way to calculate the x and y positions ahead of rendering?

Thanks Obi Wan, you're my only hope.

~~~
sxywu
If you need to re-generate the graph positions on every reload, the static
force layout is helpful
([http://bl.ocks.org/mbostock/1667139](http://bl.ocks.org/mbostock/1667139)).
The code of interest is: force.start(); for (var i = n; i > 0; --i)
force.tick(); force.stop(); Where n is the number of iterations you want it to
go through. Depending on the complexity of your graph, you may or may not
arrive at optimal layout (nodes may overlap), but does calculate and render
quickly.

Another key is to update positions of nodes and links only at calculation
_end_ , rather than at each _tick_. This means that user may have to wait a
couple seconds before seeing the graph, but will save your browser from having
to update the DOM at each tick (which could be thousands of times across
thousands of elements).

But the best is still if you don't need to re-calculate the positions (no new
nodes ever show up, and no nodes are ever deleted), going with what me_bx
said.

------
pyvpx
can anyone mention, recommend, or link to other layout algorithms? (preferably
in the less than 1000 node/edge arena, but really any!)

~~~
me_bx
The Force-Atlas2 algorithm [1] has some benefits over the force layout
implemented in d3.js, when you want to highlight the communities structure in
the graph. A javascript implementation is found in the library sigma.js [2].

Other basic layouts are the circular and random ones [3].

Gephi [4] has a variety of graph algorithms, about 10.

[1]
[http://journals.plos.org/plosone/article?id=10.1371/journal....](http://journals.plos.org/plosone/article?id=10.1371/journal.pone.0098679)

[2] [http://sigmajs.org/](http://sigmajs.org/)

[3]
[http://www.lexmath.com/grafos/sigma/ejemplos/a_plugin_exampl...](http://www.lexmath.com/grafos/sigma/ejemplos/a_plugin_example.html)

[4] [http://gephi.org/](http://gephi.org/)

Edit: added gephi to the list.

