Radial

Radial 布局是将图布局成辐射状的布局方法。以一个 focusNode 为中心，其余节点按照与 focusNode 的度数关系排列在不同距离的环上。距离 focusNode 一度的节点布局在与其最近的第一个环上，距离 focusNode 二度的节点布局在第二个环上，以此类推。算法原文链接：More Flexible Radial Layout。

属性

center

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

linkDistance

类型： Number默认值：50是否必须：false说明：边长度

maxIteration

类型： Number默认值：1000是否必须：false说明：停止迭代到最大迭代数

focusNode

类型：String | Object默认值：null是否必须：false说明：辐射的中心点，默认为数据中第一个节点。可以传入节点 id 或节点本身

unitRadius

类型：Number默认值：100是否必须：false说明：每一圈距离上一圈的距离。默认填充整个画布，即根据图的大小决定

preventOverlap

类型：Boolean默认值：false是否必须：false说明：是否防止重叠，必须配合下面属性 nodeSize ，只有设置了与当前图节点大小相同的 nodeSize 值，才能够进行节点重叠的碰撞检测

nodeSize

类型： Number默认值：10是否必须：false说明：节点大小（直径）。用于防止节点重叠时的碰撞检测

maxPreventOverlapIteration

类型： Number默认值：200是否必须：false说明：防止重叠步骤的最大迭代次数

strictRadial

类型： Boolean默认值：true是否必须：false说明：是否必须是严格的 radial 布局，及每一层的节点严格布局在一个环上。preventOverlap 为 true 时生效。

• 当 preventOverlap 为 true，且 strictRadial 为 false 时，有重叠的节点严格沿着所在的环展开，但在一个环上若节点过多，可能无法完全避免节点重叠。
• 当 preventOverlap 为 true，且 strictRadial 为 true 时，允许同环上重叠的节点不严格沿着该环布局，可以在该环的前后偏移以避免重叠。

（左）preventOverlap = false。（中）preventOverlap = false，strictRadial = true。（右）preventOverlap = false，strictRadial = false。

方法

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

使用方法

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

const graph = new G6.Graph({
  container: 'mountNode',
  width: 1000,
  height: 600,
  layout: {
    type: 'circular',
    center: [ 200, 200 ],     // 可选，默认为图的中心
    linkDistance: 50,         // 可选，边长
    maxIteration: 1000,       // 可选
    focusNode: 'node11',      // 可选
    unitRadius: 100,          // 可选
    preventOverlap: true,     // 可选，必须配合 nodeSize
    nodeSize: 30,             // 可选
    strictRadial: false       // 可选
  }
);