力导向图布局
力导向图布局作为较早被发明的一种实际应用布局算法,经过研究者多年改进、扩展,已发展成为一类算法的集合。该类算法的特点是模拟物理世界中的作用力,施加在节点上,并迭代计算以达到合理放置节点、美观布局的一类算法。
使用指南
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
说明:布局完成后的回调函数