Force Layout Graphs in D3 Module 4

This page is a reference for viewers of my Force Layout Graphs in D3 course on

If you don’t have an account on Pluralsight you can get a free trial here: Free Trial on


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])
.on(“tick”, tick)


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