Circular 环形布局

Circular 环形布局根据参数指定的排序方式对节点进行排序后,将节点排列在圆环上。

使用指南

G6 内置的 Circular 环形布局可在实例化 Graph 时使用该布局。除此之外,还可以如子图布局所示单独使用布局。该布局可以通过配置调整半径、起始和结束角度、节点排序方式、节点分组、螺旋线布局等。

  • 代码演示 1 :基本的环形布局,节点根据在数据中的顺序逆时针排列。
  • 代码演示 2 :节点根据其度数从大到小逆时针排列。
  • 代码演示 3 :螺旋线布局。
  • 代码演示 4 :分组圆环布局。
  • 代码演示 5 :圆环布局参数动态变化。
基本 Circular 布局按照节点度数排序的 Circular 布局螺旋线布局分割环形布局Circular 布局参数动态变化

center

类型: Array
示例:[ 0, 0 ]
默认值:图的中心
是否必须:false
说明:布局的中心

radius

类型: Number
默认值:null
是否必须:false
说明:圆的半径。若设置了 radius,则 startRadius 与 endRadius 不生效

startRadius

类型: Number
默认值:null
是否必须:false
说明:螺旋状布局的起始半径

endRadius

类型:Number
默认值:null
是否必须:false
说明:螺旋状布局的结束半径

clockwise

类型:Boolean
默认值:true
是否必须:false
说明:是否顺时针排列

divisions

类型:Number
默认值:1
是否必须:false
说明:节点在环上的分段数(几个段将均匀分布),在 endRadius - startRadius != 0 时生效

ordering

类型:String
默认值:false
可选值:null | 'topology' | 'degree'
是否必须:false
说明:节点在环上排序的依据。默认 null 代表直接使用数据中的顺序。'topology' 按照拓扑排序。'degree' 按照度数大小排序

angleRatio

类型: Number
默认值:1
是否必须:false
说明:从第一个节点到最后节点之间相隔多少个 2*PI