Radial 辐射布局

Radial 辐射布局根据参数中指定的 focusNode 为中心点,根据其他节点与中心点的拓扑距离(最短路径长度)将其余节点放置在以中心点为圆心的同心圆上。

使用指南

G6 内置的 Radial 布局可在实例化 Graph 时使用该布局。除此之外,还可以如子图布局所示单独使用布局。该布局可以通过配置调整辐射半径、节点不重叠、不严格的辐射布局等。

  • 代码演示 1 :基本的 Radial 布局。
  • 代码演示 2 :根据不同的节点大小计算节点不重叠。
  • 代码演示 3 :不严格的辐射布局允许同层节点有前后交错以避免节点重叠。
  • 代码演示 4 :利用子图布局机制可以实现点击节点进行扩展的功能,请尝试点击 2 号节点。
  • 代码演示 5 :Radial 布局参数动态变化。
基本 Radial 辐射布局防止节点重叠的严格辐射布局防止节点重叠的非严格辐射布局交互扩展节点的辐射布局Radial 布局参数动态变化

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 布局,及每一层的节点严格布局在一个环上。preventOverlaptrue 时生效。

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

                          

(左)preventOverlap = false。(中)preventOverlap = false,strictRadial = true。(右)preventOverlap = false,strictRadial = false。