block by GerHobbelt 3616279

d3.js: force layout with self-referencing links

Full Screen

Experiment …… ? 8

Derived from the D3.js example force_cluster.html and gist 3104394.




The ability to draw circular references is following the overall force design used here, where helper nodes (and ditto links) are used to produce the bezier-based links; a self-reference is nothing but yet another nodeA -> helper -> nodeB link chain where ‘nodeB’ just happens to be nodeA again.

This code uses two(2) d3.layout.force() forces: one to layout the original nodes (or their group node equivalent), the second is used to layout all the helper nodes (which are only visible in debug modes 1 and 2): the latter are used to construct the bezier paths representing the links.