Radial Layout will place the nodes to the concentric circles around the focusNode according to the shortest path length to focusNode.
Usage
As the demo below, you can deploy it in layout while instantiating Graph. it can also be used for Subgraph Layout. By tuning the parameters, you can adjust the iteration number, compact degree, layout buy cluster, and so on. By tuning the parameters, you can adjust the radial radius, preven node overlappings, relaxed radial, and so on.
Example 1 : Basic Radial Layout.
Example 2 : Prevent node overlappings according each node's size.
Example 3 : Relaxed radial layout allows offsets between nodes on the same level to prevent node overlappings.
Example 4 : By using the subgraph layout mechanism, we extend nodes by interaction. Try to click node 2.
Example 5 : Translate the parameters of Radial Layout.
Type: Array Example: [ 0, 0 ] Default: The center of graph Required: false Explanation: The center of the layout
linkDistance
Type: Number Default: 50 Required: false Explanation: Edge length
maxIteration
Type: Number Default: 1000 Required: false Explanation: The max number of iteration to stop
focusNode
Type: String | Object Default: null Required: false Explanation: The focus node of the radial layout. If it is not assigned, the first node in the data will take effect. This parameter can be the node's id as String, or the node object.
unitRadius
Type: Number Default: 100 Required: false Explanation: The distance between circles. If it is not assigned, this algorithm will calculate a value to fill the whole canvas.
preventOverlap
Type: Boolean Default: false Required: false Explanation: Switch to prevent the node overlappings. It should be used with nodeSize. Only if the nodeSize is assigned, the collide detection will take effect.
nodeSize
Type: Number Default: 10 Required: false Explanation: The size of the node(diameter). It will be used in collide dectection for preventing node overlappings.
maxPreventOverlapIteration
Type: Number Default: 200 Required: false Explanation: The max number of iterations to stop the prevent node overlappings.
strictRadial
Type: Boolean Default: true Required: false Explanation: Whether to layout the radial strictly, which means place the nodes with same level on a circle strictly. It will take effect while preventOverlap is true.
When preventOverlap is true and strictRadial is false, this algorithm will try to place the overlapped nodes alone a circle without overlappings as much as possible. But the overlappings might not be able to avoid while there are too many nodes in a small circle.
When preventOverlap is true and strictRadial is true, this algorithm allows offsets between nodes on the same level to prevent node overlappings.
