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.

center

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.

                          

（Left）preventOverlap = false。（Center）preventOverlap = false，strictRadial = true。（Right）preventOverlap = false，strictRadial = false。