Force Layout Graphs in D3 Module 4

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

 

Link Data Structure

D3 Force Layouts like a flat data structure

var links = [
{ name: ‘Alice’, source: 0, target: 1 },
{ name: ‘Bob’, source: 1, target: 2 },
{ name: ‘Eve’, source: 2, target: 0 }
];

Adding Links

var force = d3.layout.force()
.size([width, height])
.nodes(nodes)
.links(links)
.on(“tick”, tick)
.linkDistance(width/2)
.start();

 

Adding Curved Links

  • Use path instead of line to draw a curved link
  • Use the M & A shorthand attributes to draw curve

Sample code to calculate curve using Barnes-Hut Algoritm

dr = Math.sqrt(dx * dx + dy * dy);

Adding Arrows to Links

 

 

Free 5 Day Video Course | Tableau Quick Start

Everything you need to become dangerous :)

x