All examples By author By category About

emeeks

D3v4 Constraint-Based Layout

Organizing a network made of disconnected pieces like this one is improved by fixing those subgraphs into their own space on the canvas. A while back I showed how to do this using custom code in the tick() function of the D3v3 force layout as part of How to Create Effective Network Data Visualization.

Here's a much easier and cleaner way to do it using the new D3v4 force-layout by specifying a d3.forceY and d3.forceX that are associated with the node's module.