d3.js force layout (plugin) minimizing overlap between nodes
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
LICENSE
README.org
package.json
separate.js

README.org

d3-force-separate

This plugin augments the force-directed layout in d3.js with an algorithm for minimizing spatial overlap between nodes.

The returned force-directed layout has a new listener registered as tick.separate.

d3.layout.force.separate([force])
  .padding(10)
  .stickyness(.1)
  .conformity(1.0)
  .shape('rectangle')
  .nodes(nodes).start();

You can play with the various parameters in this example.

Attributes on nodes

The following attributes are used in addition to the native ones:

x0, y0
a node’s anchor / ideal position
width, height
sizes used to determine when two nodes overlap

Configurable parameters

padding
distance from a node within which another node is considered overlapping
stickyness
strength with which nodes are attracted to their anchors (in the same way as the “gravity” parameter pulls nodes towards the layout’s center)
conformity
a number between 0 and 1, small values meaning that nodes can slide sideways and arrange more compactly
shape
either rectangle or ellipse, the shape used to detect overlap between two nodes
loop
either simple or qtree, this may impact performance in some cases (see source)

Code snippets

Setting nodes’ sizes from SVGLocatable.getBBox()

svg_selection.each(function(node){
  var r = this.getBBox();
  node.x0 = r.x + (node.width = r.width) *.5;
  node.y0 = r.y + (node.height = r.height) *.5;
});

Initializing nodes’ positions

force.nodes().forEach(function(n){
  if (typeof n.x === 'undefined') n.x = n.px = n.x0;
  if (typeof n.y === 'undefined') n.y = n.py = n.y0;
});