All examples By author By category About

cool-Blue

d3.js: force layout with self-referencing links

Experiment …… ? 8

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

Features

Usage

Notes

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.