g6/packages/site/docs/api/graphLayout/comboForce.zh.md

title	order
Combo 力导向 ComboForce	13

*V3.5 新增功能。*ComboForce 是基于力导向的专用于带有 combo 的图的布局算法。通过自研改造经典力导向算法，将根据节点的 combo 信息，施加不同的力以达到同 combo 节点尽可能聚集，不同 combo 之间尽可能无重叠的布局。

⚠️ 注意:G6 3.1 版本中实例化 Graph 时，新增了 nodeStateStyles 及  edgeStateStyles 两个配置项，删除了 nodeStyle 和 edgeStyle ，使用 3.1 以下版本的同学，只需要将  nodeStyle 改成 nodeStateStyles ，将  edgeStyle 改成  edgeStateStyles ，配置内容保持不变。

const graph = new G6.Graph({
  container: 'mountNode',
  width: 1000,
  height: 600,
  groupByTypes: false, // 若希望在带有 combo 的图上，节点、边、combo 的层级符合常规逻辑，需要将 groupByTypes 设置为 false
  layout: {
    type: 'comboForce',
    center: [ 200, 200 ],     // 可选，默认为图的中心
    linkDistance: 50,         // 可选，边长
    nodeStrength: 30,         // 可选
    edgeStrength: 0.1,        // 可选
    onTick: () => {           // 可选
      console.log('ticking');
    },
    onLayoutEnd: () => {      // 可选
      console.log('combo force layout done');
    }
  }
);

layoutCfg.center

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

layoutCfg.maxIteration

类型： Number
默认值：100
是否必须：false
说明：最大迭代次数

layoutCfg.linkDistance

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

layoutCfg.nodeStrength

类型： Number / Function
默认值：30
是否必须：false
说明：节点作用力

layoutCfg.edgeStrength

类型：Number / Function
默认值：0.2
是否必须：false
说明：边的作用力

layoutCfg.preventOverlap

类型：Boolean
默认值：false
是否必须：false
说明：是否防止节点之间以及 combo 之间的重叠，若开启，则 preventNodeOverlap 与 preventComboOverlap 将均被开启。详见 preventNodeOverlap 与 preventComboOverlap 介绍

layoutCfg.preventNodeOverlap

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

layoutCfg.preventComboOverlap

类型：Boolean
默认值：true
是否必须：false
说明：是否防止 combo 之间的重叠

layoutCfg.collideStrength

类型：Number
默认值：undefined
是否必须：false
说明：统一设置防止节点之间以及 combo 之间重叠的力强度，范围 [0, 1]。若 collideStrength 不为 undefined，则 nodeCollideStrength 与 comboCollideStrength 将均被设置为统一的值

layoutCfg.nodeCollideStrength

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

layoutCfg.comboCollideStrength

类型：Number
默认值：0.5
是否必须：false
说明：防止 combo 之间重叠的力强度，范围 [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;
};

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

layoutCfg.comboSpacing

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

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

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

layoutCfg.comboPadding

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

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

描述: Combo 内部的 padding 值，不用于渲染，仅用于计算力。推荐设置为与视图上 combo 内部 padding 值相同的值

layoutCfg.alpha

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

layoutCfg.alphaDecay

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

layoutCfg.alphaMin

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

layoutCfg.onTick

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

layoutCfg.onLayoutEnd

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

layoutCfg.gravity

类型： Number
默认值：10
是否必须：false
说明：重力的大小，影响布局的紧凑程度

layoutCfg.comboGravity

类型： Number
默认值：30
是否必须：false
说明：每个 combo 内部的重力大小，影响聚类的紧凑程度

layoutCfg.optimizeRangeFactor

类型： Number
默认值：1
是否必须：false
说明：优化计算性能，两节点间距超过 optimizeRangeFactor * width 则不再计算斥力和重叠斥力。通过合理设置该参数可以较少计算量

layoutCfg.depthAttractiveForceScale

类型： Number
默认值：0.5
是否必须：false
说明：根据边两端节点层级差距的调整引力的系数的因子，取值范围 [0, 1]。层级差距越大，引力越小

layoutCfg.depthRepulsiveForceScale

类型： Number
默认值：2
是否必须：false
说明：根据边两端节点层级差距的调整斥力系数的因子，取值范围 [1, Infinity]。层级差距越大，斥力越大

layoutCfg.velocityDecay

类型： Number
默认值：0.6
是否必须：false
说明：节点运动速度衰减参数

layoutCfg.workerEnabled

类型: Boolean
默认值: false
是否必须: false
说明: 是否启用 web-worker 以防布局计算时间过长阻塞页面交互。 ⚠️ 注意: workerEnabled: true 时，不支持所有函数类型的参数。