Circular

Circular 布局将所有节点布局在一个圆环上，可以选择节点在圆环上的排列顺序。可以通过参数的配置扩展出环的分组布局、螺旋形布局等。原文链接：A framework and algorithms for circular drawings of graphs。

属性

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

方法

与父类 Layout 的方法相同。使用该布局时不需要关心内部方法的调用，由 G6 控制。

使用方法

实例化图时配置到 layout 中，如果没有配置 layout 默认使用 Random 布局。

const graph = new G6.Graph({
  container: 'mountNode',
  width: 1000,
  height: 600,
  layout: {
    type: 'circular',
    center: [ 200, 200 ],  // 可选，默认为图的中心
    radius: null,          // 可选
    startRadius: 10,       // 可选
    endRadius: 100,        // 可选
    clockwise: false,      // 可选
    divisions: 5,          // 可选
    ordering: 'degree',    // 可选
    angleRatio: 1          // 可选
  }
);