概述

环形布局是一种把节点均匀或者按间隔放置在圆上的布局，也支持通过配置 startRadius 和 endRadius 为不一样的值实现螺旋状布局。参考更多环形布局样例或源码。

使用场景

环形布局:

• 适用于平等关系网络、无层级结构的图

螺旋状布局:

• 适用于隐式层级或时间序列图（如组织架构、传播网络）

基本用法

其余均使用默认配置（布局宽高默认是整个画布容器）

const graph = new Graph({
  // 其他配置
  layout: {
    type: 'circular',
  },
});

配置项

ordering

节点在环上排序的依据

• topology: 按照拓扑排序
• topology-directed: 按照拓扑排序（有向图）
• degree: 按照度数大小排序

不配置（null）则直接使用数组中的顺序

radius

如果radius、startRadius、endRadius都没配置，则默认为最终计算出来的Math.min(布局宽度, 布局高度) / 2，即布满整个布局区域

代码示例

基础环形布局

const graph = new Graph({
  // 其他配置
  layout: {
    type: 'circular',
  },
});

螺旋状布局

const graph = new Graph({
  // 其他配置
  layout: {
    type: 'circular',
    startRadius: 10,
    endRadius: 300,
  },
});