力导向图布局

力导向图布局作为较早被发明的一种实际应用布局算法,经过研究者多年改进、扩展,已发展成为一类算法的集合。该类算法的特点是模拟物理世界中的作用力,施加在节点上,并迭代计算以达到合理放置节点、美观布局的一类算法。

使用指南

G6 内置的经典力导向算法引用了 d3.js 的力导向算法。如下面代码所示,可在实例化 Graph 时使用该布局。除此之外,还可以如子图布局所示单独使用布局。

  • 代码演示 1 :基础的经典力导向布局及节点的拖拽。
  • 代码演示 2 :节点不重叠。
  • 代码演示 3 :为不同节点调整边长和力。
  • 代码演示 4 :固定被拖拽的节点。
  • 代码演示 5 :支持布局参数的动态切换。
  • 代码演示 6 :使用力导向算法实现气泡效果及交互。
  • 代码演示 7 :约束在一定范围内进行力导向布局。
基本力导向布局及节点拖拽力导向布局防止节点重叠定制不同节点的参数固定被拖拽节点力导向布局参数动态变化力导向气泡图约束在范围内布局

center

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

linkDistance

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

nodeStrength

类型: Number
默认值:null
是否必须:false
说明:节点作用力,正数代表节点之间的引力作用,负数代表节点之间的斥力作用

edgeStrength

类型:Number
默认值:null
是否必须:false
说明:边的作用力,默认根据节点的出入度自适应

collideStrength

类型:Number
默认值:1
是否必须:false
说明:防止重叠的力强度,范围 [0, 1]

nodeSize

类型: Number
默认值:10
是否必须:false
说明:节点大小(直径)。用于碰撞检测。若不指定,则根据传入的节点的 size 属性计算。若即不指定,即节点中也没有 size,则默认大小为 10

alpha

类型:Number
默认值:0.3
是否必须:false
说明:当前的迭代收敛阈值

alphaDecay

类型:Number
默认值:0.028
是否必须:false
说明:迭代阈值的衰减率。[0, 1],0.028 对应迭代书为 300

alphaMin

类型:Number
默认值:0.001
是否必须:false
说明:停止迭代的阈值

forceSimulation

类型:Object
默认值:null
是否必须:false
说明:自定义 force 方法,若不指定,则使用 d3 的方法

onTick

类型:Function
默认值:{}
是否必须:false
说明:每一次迭代的回调函数

onLayoutEnd

类型:Function
默认值:{}
是否必须:false
说明:布局完成后的回调函数