Force Layout Graphs in D3 Module 5

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

 

Applying Distance to Links

linkDistance

If distance is specified, sets the target distance between linked nodes to the specified value. default is 20

var force = d3.layout.force()
.size([width, height])
.nodes(nodes)
.links(links)
.on("tick", tick)
  .linkDistance(param) 
.start();

 

Unequal Distance

When two or more nodes have different distance settings. This is common in network graphs which represent physical locations.

Example:

var links = [
{ source: 0, target: 1, distance: 100 },
{ source: 1, target: 2, distance: 200 },
{ source: 2, target: 0, distance: 300 }
];

Applying Strength to Links

If strength is specified, sets the strength (rigidity) of links to the specified value in the range [0,1]. Specifically this affects the linkDistance value.

Example:

// create the force layout graph
var force = d3.layout.force()
.size([width, height])
.nodes(nodes)
.links(links)
.on("tick", tick)
.linkDistance(width/3)
.linkStrength(strength)   
.start();

Free 5 Day Video Course | Tableau Quick Start

Everything you need to become dangerous :)

x