block by emeeks 302096884d5fbc1817062492605b50dd

D3v4 Constraint-Based Layout

Full Screen

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.

index.html

graph.json