Webcola
Ref.: https://ialab.it.monash.edu/webcola/
Hierarchical representation of the data
D3 provides out of the box hierarchical layout to compute positions of nodes in hierarchical way. However, hierarchical layout works on the data which is in a tree-like format (implicit parent-child structure), with a constraint that one node must not have more than one parent. Therefore, we cannot use d3-hierarchy to create tree-like layouts to denote hierarchical information when the data structure looks like graph.
We can solve this problem by leveraging the D3 force directed layout in order to achieve the non-overlapping nodes and putting additional constraints on geometric node positions to achieve hierarchical layout. It can be achieved purely in D3, however, it is a bit tedious to write constraints in plain JavaScript.
There is an easier way - WebCola.
start(10,15,20)
Params:
initialUnconstrainedIterations: number = 0
initialUserConstraintIterations: number = 0
initialAllConstraintsIterations: number = 0
gridSnapIterations: number = 0
keepRunning: boolean = true
centerGraph: boolean = true
The start() method now includes up to three integer arguments. In the example above, start will initially apply 10 iterations of layout with no constraints, 15 iterations with only structural (user-specified) constraints and 20 iterations of layout with all constraints including anti-overlap constraints. Specifying such a schedule is useful to allow the graph to untangle before making it relatively "rigid" with constraints.
Constraints
{"axis":"y", "left":0, "right":1, "gap":25}
linkDistance(30)
Set linkDistance to something reasonable for the size of your nodes (in the same coordinate system).
avoidOverlaps(true)
Dynamically generates constraints while layout progresses in order to prevent the bounding boxes of nodes from sliding over one another.
symmetricDiffLinkLengths
Computes ideal lengths on each link to make extra space around high-degree nodes, using 5 as the basic length.