Force Layout

Force 布局经典的力导向布局方法，与 d3 的力导向布局方法相对应。其属性也与 d3.js 的力导布局参数相对应。

const graph = new F6.Graph({
  ...
  width: 1000,
  height: 600,
  layout: {
    type: 'force',
    center: [ 200, 200 ],     // 可选，默认为图的中心
    linkDistance: 50,         // 可选，边长
    nodeStrength: 30,         // 可选
    edgeStrength: 0.1,        // 可选
    collideStrength: 0.8,     // 可选
    nodeSize: 30,             // 可选
    alpha: 0.3,               // 可选
    alphaDecay: 0.028,        // 可选
    alphaMin: 0.01,           // 可选
    forceSimulation: null,    // 可选
    onTick: () => {           // 可选
      console.log('ticking');
    },
    onLayoutEnd: () => {      // 可选
      console.log('force layout done');
    }
  }
);

layoutCfg.center

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

layoutCfg.linkDistance

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

layoutCfg.nodeStrength

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

layoutCfg.edgeStrength

类型：Number / Function
默认值：null
是否必须：false
说明：边的作用力，范围是 0 到 1，默认根据节点的出入度自适应

layoutCfg.preventOverlap

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

layoutCfg.collideStrength

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

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;
};

layoutCfg.alpha

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

layoutCfg.alphaDecay

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

layoutCfg.alphaMin

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

layoutCfg.clustering

类型：Boolean
默认值：false
是否必须：false
说明：是否按照聚类信息布局

layoutCfg.clusterNodeStrength

类型：Number
默认值：-1
是否必须：false
说明：聚类节点作用力。负数代表斥力

layoutCfg.clusterEdgeStrength

类型：Number
默认值：0.1
是否必须：false
说明：聚类边作用力

layoutCfg.clusterEdgeDistance

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

layoutCfg.clusterNodeSize

类型：Number
默认值：10
是否必须：false
说明：聚类节点大小 / 直径，直径越大，越分散

layoutCfg.clusterFociStrength

类型：Number
默认值：0.8
是否必须：false
说明：用于 foci 的力

layoutCfg.forceSimulation

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

layoutCfg.onTick

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

layoutCfg.onLayoutEnd

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

layoutCfg.workerEnabled

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

Force Atlas 2 Layout

Force Atlas 2 是一种力导向布局的变形，比 force 收敛地更好，更紧凑。

const graph = new F6.Graph({
  ...
  width: 1000,
  height: 600,
  layout: {
    type: 'forceAtlas2',
    width: 300,
    height: 300,
  },
});

layoutCfg.center

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

layoutCfg.width

类型： Number
默认值：图的宽度
是否必须：false
说明：布局的宽度范围

layoutCfg.height

类型： Number
默认值：图的高度
是否必须：false
说明：布局的高度范围

layoutCfg.workerEnabled

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

layoutCfg.kr

类型： Number
默认值：5
是否必须：false
说明：斥力系数，可用于调整布局的紧凑程度。kr 越大，布局越松散

layoutCfg.kg

类型： Number
默认值：5
是否必须：false
说明：重力系数。kg 越大，布局越聚集在中心

layoutCfg.ks

类型： Number
默认值：0.1
是否必须：false
说明：控制迭代过程中，节点移动的速度

layoutCfg.tao

类型： Number
默认值：0.1
是否必须：false
说明：迭代接近收敛时停止震荡的容忍度

layoutCfg.mode

类型： 'normal' | 'linlog'
默认值：'normal'
是否必须：false
说明：'linlog' 模式下，聚类将更加紧凑

layoutCfg.preventOverlap

类型： boolean
默认值：false
是否必须：false
说明：是否防止节点重叠

layoutCfg.dissuadeHubs

类型： boolean
默认值：false
是否必须：false
说明：是否打开 hub 模式。若为 true，相比与出度大的节点，入度大的节点将会有更高的优先级被放置在中心位置

layoutCfg.barnesHut

类型： boolean
默认值：false
是否必须：false
说明：是否打开 barnes hut 加速，即四叉树加速。由于每次迭代需要更新构建四叉树，建议在较大规模图上打开

layoutCfg.prune

类型： boolean
默认值：false
是否必须：false
说明：是否开启自动剪枝模式。默认情况下，当节点数量大于 100 时它将会被激活。注意，剪枝能够提高收敛速度，但可能会降低图的布局质量

layoutCfg.maxIteration

类型： number
默认值：0
是否必须：false
说明：最大迭代次数，若为 0 则将自动调整

layoutCfg.getWidth

类型： function
默认值：undefined
是否必须：false
说明：节点宽度的函数，参数为节点数据

layoutCfg.getHeight

类型： function
默认值：undefined
是否必须：false
说明：节点高度的函数，参数为节点数据

layoutCfg.onLayoutEnd

类型： function
默认值：undefined
是否必须：false
说明：布局结束后的回调函数

layoutCfg.onTick

类型： function
默认值：undefined
是否必须：false
说明：布局每次迭代的回调函数