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
- Add a svg:marker to the link
- Mobile Patent Suite Example