Circular Layout

Circular layout orders the nodes according to the configuration, and then places the nodes on a circle.

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 configurations, you can adjust the radius, start angle, end angle, nodes' order method, divisions, spiral style, and so on.

  • Example 1 : Basic Circular Layout, the nodes are placed on the circle clockwise in the data order.
  • Example 2 : The nodes are placed on the circle clockwise according to their degrees.
  • Example 3 : Spiral layout.
  • Example 4 : Divide the nodes into several divisions on the circle.
  • Example 5 : Translate the parameters in dynamic.
基本 Circular 布局按照节点度数排序的 Circular 布局螺旋线布局分割环形布局Circular 布局参数动态变化

center

Type: Array
Example: [ 0, 0 ]
Default: The center of the graph
Required: false
Explanation: The center of the layout

radius

Type: Number
Default: null
Required: false
Explanation: The radius of the circle. If the radius is assigned a value, the startRadius and endRadius will not take effect

startRadius

Type: Number
Default: null
Required: false
Explanation: The start radius of spiral style layout

endRadius

Type: Number
Default: null
Required: false
Explanation: The end radius of spiral style layout

clockwise

Type: Boolean
Default: true
Required: false
Explanation: If layout the nodes by clockwise

divisions

Type: Number
Default: 1
Required: false
Explanation: The number of divisions on the circle. It will takes effect while endRadius - startRadius != 0

ordering

Type: String
Default: false
可选值: null | 'topology' | 'degree'
Required: false
Explanation: The nodes will be ordered according to this parameter. null means order the nodes in data order/ 'topology' means order the node by topology. 'degree' means order the nods by their degrees.

angleRatio

Type: Number
Default: 1
Required: false
Explanation: How many 2*PI between the first node to the last node.