fbpx

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

[code]

var links = [

{ name: ‘Alice’, source: 0, target: 1 },

{ name: ‘Bob’, source: 1, target: 2 },

{ name: ‘Eve’, source: 2, target: 0 }

];

[/code]

Adding Links

[code]

var force = d3.layout.force()

.size([width, height])

.nodes(nodes)

.links(links)

.on(“tick”, tick)

.linkDistance(width/2)

.start();

[/code]

 

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

[code]dr = Math.sqrt(dx * dx + dy * dy);[/code]

Adding Arrows to Links