This page is a reference for viewers of my Force Layout Graphs in D3 course on Pluralsight.com
If you don't have an account on Pluralsight you can get a free trial here: Free Trial on Pluralsight.com
Working with Gravity
A weak geometric constraint similar to a virtual spring connecting each node to the center of the layout's size.
*This keeps nodes from floating out of the SVG viewport.
Example:
[code]
var force = d3.layout.force()
.size([width, height])
.nodes([{}]) // initialize with a single node
.linkDistance(30)
.gravity(0.05)
.on(“tick”, tick);
[/code]
Working with Charge
A negative value results in node repulsion, while a positive value results in node attraction. For graph layout, negative values should be used.
chargeDistance
Specifying a finite charge distance improves the performance of the force layout and produces a more localized layout.
*Distance-limited charge forces are especially useful in conjunction with custom gravity
Example:
[code]
var param = document.URL.split(‘#')[1] || -30;
var force = d3.layout.force()
.size([width, height])
.nodes([{}]) // initialize with a single node
.linkDistance(30)
.gravity(0.05)
.charge(param) //use our param value
.on(“tick”, tick);
[/code]