GForce

阅读时间约 2 分钟

GForce 实现了经典的力导向算法,F6 支持。能够更加自由地支持设置节点质量、群组中心力等。更重要的是,它支持 GPU 并行计算。

img
const graph = new F6.Graph({
  ...
  width: 1000,
  height: 600,
  layout: {
    type: 'gForce',
    center: [ 200, 200 ],     // 可选,默认为图的中心
    linkDistance: 50,         // 可选,边长
    nodeStrength: 30,         // 可选
    edgeStrength: 0.1,        // 可选
    nodeSize: 30,             // 可选
    onTick: () => {           // 可选
      console.log('ticking');
    },
    onLayoutEnd: () => {      // 可选
      console.log('force layout done');
    },
    workerEnabled: true,      // 可选,开启 web-worker
    gpuEnabled: true          // 可选,开启 GPU 并行计算,F6 4.0 支持
    ... // 更多参数见下方
  }
});

layoutCfg.center

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

layoutCfg.linkDistance

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

layoutCfg.nodeStrength

类型: Number / Function
默认值:1000
是否必须:false
说明:节点作用力,正数代表节点之间的斥力作用,负数代表节点之间的引力作用(注意与 'force' 相反)

layoutCfg.edgeStrength

类型:Number / Function
默认值:200
是否必须:false
说明:边的作用力(引力)大小

layoutCfg.preventOverlap

类型:Boolean
默认值:false
是否必须:false
说明:是否防止重叠,必须配合下面属性 nodeSize 或节点数据中的 size 属性,只有在数据中设置了 size 或在该布局中配置了与当前图节点大小相同的 nodeSize 值,才能够进行节点重叠的碰撞检测

layoutCfg.nodeSize

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

layoutCfg.nodeSpacing

类型: Number / Function
默认值: 0
是否必须: false
示例: Example 1: 10
Example 2:

(d) => {
  // d is a node
  if (d.id === 'node1') {
    return 100;
  }
  return 10;
};


描述: preventOverlaptrue 时生效, 防止重叠时节点边缘间距的最小值。可以是回调函数, 为不同节点设置不同的最小间距, 如示例 2 所示

layoutCfg.minMovement

类型:Number
默认值:0.5
是否必须:false
说明:当一次迭代的平均移动长度小于该值时停止迭代。数字越小,布局越收敛,所用时间将越长

layoutCfg.maxIteration

类型:Number
默认值:1000
是否必须:false
说明:最大迭代次数。当迭代次数超过该值,但平均移动长度仍然没有达到 minMovement,也将强制停止迭代

layoutCfg.damping

类型:Number
默认值:0.9
是否必须:false
说明:阻尼系数,取值范围 [0, 1]。数字越大,速度降低得越慢

layoutCfg.maxSpeed

类型:Number
默认值:1000
是否必须:false
说明:一次迭代的最大移动长度

layoutCfg.coulombDisScale

类型:Number
默认值:0.005
是否必须:false
说明:库伦系数,斥力的一个系数,数字越大,节点之间的斥力越大

layoutCfg.getMass

类型:Function
默认值:undefined
是否必须:false
说明:每个节点质量的回调函数,若不指定,则默认使用度数作为节点质量。使用方法与 nodeSpacing 类似,每个回调函数返回一个数值作为该节点的质量

layoutCfg.getCenter

类型:Function
默认值:undefined
是否必须:false
说明:每个节点中心力的 x、y、强度的回调函数,若不指定,则没有额外中心力
示例:

(d, degree) => {
  // d is a node, degree is the degree of the node
  if (d.clusterId === 'c1') return [100, 100, 10]; // x, y, strength
  if (degree === 0) return [250, 250, 15];
  return [180, 180, 5]; // x, y, strength
};

layoutCfg.gravity

类型:Number
默认值:10
是否必须:false
说明:中心力大小,指所有节点被吸引到 center 的力。数字越大,布局越紧凑

layoutCfg.onTick

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

layoutCfg.onLayoutEnd

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

layoutCfg.workerEnabled

类型: Boolean
默认值: false
是否必须: false
说明: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互

layoutCfg.gpuEnabled

类型: Boolean
默认值: false
是否必须: false
说明: 是否启用 GPU 并行计算。若用户的机器或浏览器不支持 GPU 计算,将会自动降级为 CPU 计算。自 F6 4.0 起支持,性能提升概览: