Force Layout Graphs in D3 Module 6

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:

var force = d3.layout.force()
.size([width, height])
.nodes([{}]) // initialize with a single node
.linkDistance(30)
.gravity(0.05)
.on("tick", tick);

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:

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);

 

Free 5 Day Video Course | Tableau Quick Start

Everything you need to become dangerous :)

x