Force 力导向布局

概述

力导向布局是一种基于物理模拟的图布局算法，它通过模拟节点间的引力和斥力来确定节点的位置。这种布局方式特别适合展示复杂的关系网络，如社交网络、知识图谱等。

力导向布局会自动计算并调整节点位置，使得相连的节点保持适当的距离，同时尽量减少边的交叉。布局过程中会模拟物理系统，节点会像带电粒子一样相互排斥，边则像弹簧一样连接节点。

力导向布局的主要特点包括：

1. 自动排列：不需要手动设置节点位置，系统会自动找到合适的位置
2. 实时调整：当你拖动某个节点时，其他节点会实时跟随调整位置
3. 灵活配置：
   • 可以调整节点间的吸引力和排斥力
   • 可以设置边的长度
   • 可以防止节点重叠
4. 动画效果：节点移动时会有平滑的动画，让变化更自然

核心概念

Force 力导向布局基本原理

力导向布局是一种基于物理模拟的图布局算法，它将图中的节点和边模拟为物理系统：

• 节点被视为物理粒子
• 边被视为弹簧
• 整个系统通过物理模拟达到能量最低状态

核心力详解

斥力（Node Repulsion）

• 物理模型：库伦定律（Coulomb’s Law）

• 作用：防止节点重叠，让节点分布更均匀，其中 factor 和 coulombDisScale 控制斥力的总体强度和范围。

• 公式：

  • k: 斥力系数（factor / coulombDisScale²）
  • q1,q2: 节点强度(nodeStrength)
  • r: 节点间距离

边拉力（Edge Attraction）

• 物理模型：胡克定律（Hooke’s Law）

• 作用：模拟边的拉力，使节点沿着边的方向移动，其中 edgeStrength 和 linkDistance 控制边的“硬度”和长度。

• 公式：

  • ka: 边拉力强度（edgeStrength）
  • L: 边的长度（linkDistance）
  • r: 实际边长度

向心力（Gravity）

• 物理模型：牛顿万有引力定律（Newton’s Universal Law of Gravitational）

• 作用：使节点向画布中心或者聚类中心聚集，其中 gravity 和 center 控制重力强度和中心点位置

• 公式：

  • G: 万有引力常数（gravity）
  • xc: 中心点坐标（center）
  • mass: 节点质量（nodeSize）

三种力的相互作用

• 物理模型：力的相互作用，产生加速度
• 作用：斥力、边拉力、向心力共同作用，通过加速度叠加影响节点运动，最终达到能量最低状态。
• 公式：

物理系统

节点运动速度公式

• 公式：

  • v: 速度
  • a: 加速度
  • dt: 时间步长（interval）
  • damping: 阻尼系数（damping）

• 作用：

  1. 控制节点移动的稳定性
  2. 阻尼系数防止系统震荡
  3. 时间步长影响每次迭代的位移

节点位置公式

• 公式：

  • x: 节点位置
  • v: 节点速度
  • dt: 时间步长（interval）

• 作用：

  1. 根据速度更新节点位置
  2. 确保运动连续性
  3. 通过 preventOverlap 防止节点重叠

聚类中心计算

• 公式：

  • n: 聚类内节点数量
  • (xi​,yi​): 每个节点的位置

• 作用：

  1. 计算聚类中心
  2. 向心力将节点拉向所属聚类中心
  3. 聚类中心可动态变化

聚类强度计算

• 公式：

  • s: 聚类强度（clusterNodeStrength）
  • xc​: 聚类中心

• 作用：

  1. 控制聚类的紧密程度
  2. 聚类强度越大，聚类越紧凑
  3. 可根据节点属性动态调整

质量对力的影响

• 公式：

  • a: 加速度
  • F: 力（斥力、边拉力、向心力）
  • mass: 节点质量

• 作用：

  1. 质量大的节点移动较小
  2. 质量小的节点移动较大
  3. 通过 getMass 可自定义质量计算

能量计算

• 公式：

  • m: 节点质量
  • v: 节点速度

• 作用：

  1. 监控布局收敛情况
  2. 能量趋近于零时系统趋于稳定

系统收敛条件

• 公式：

• 作用：

  1. 控制迭代次数
  2. 移动量小于阈值时停止
  3. 通过 distanceThresholdMode 可选择平均值、最大值或最小值

力相互作用图

配置项

根据上述力导向布局的物理特性，有以下配置项：

基础配置

力相关配置

斥力配置

边拉力配置

向心力配置

聚类配置

性能与优化配置

其他配置

代码示例

基础用法

const graph = new Graph({
  container: 'container',
  layout: {
    type: 'force',
    // 防止节点重叠
    preventOverlap: true,
    // 节点大小
    nodeSize: 20,
    // 布局宽度
    width: 800,
    // 布局高度
    height: 600,
  },
});

防止节点重叠

const graph = new Graph({
  layout: {
    type: 'force',
    // 防止节点重叠
    preventOverlap: true,
    // 节点大小
    nodeSize: 20,
  },
});

力导向布局

该示例展示了如何使用力导向布局创建一个基础的力导向图。

import { Graph, NodeEvent } from '@antv/g6';

const data = {
  nodes: [
    { id: 'node1', label: 'Node 1', size: 30 },
    { id: 'node2', label: 'Node 2', size: 20 },
    { id: 'node3', label: 'Node 3', size: 20 },
    { id: 'node4', label: 'Node 4', size: 20 },
    { id: 'node5', label: 'Node 5', size: 30 },
    { id: 'node6', label: 'Node 6', size: 20 },
  ],
  edges: [
    { source: 'node1', target: 'node2' },
    { source: 'node1', target: 'node3' },
    { source: 'node2', target: 'node4' },
    { source: 'node3', target: 'node4' },
    { source: 'node4', target: 'node5' },
    { source: 'node5', target: 'node6' },
  ],
};

const graph = new Graph({
  container: 'container',
  data,
  autoFit: 'view',
  modes: {
    default: ['drag-canvas', 'zoom-canvas'],
  },
  layout: {
    type: 'force',
    // 防止节点重叠
    preventOverlap: true,
    // 节点大小
    nodeSize: 20,
    // 向心力
    gravity: 0.9,
    // 迭代次数
    iterations: 100,
  },
  node: {
    style: {
      size: (d) => d.size,
      fill: '#9EC9FF',
      stroke: '#69C8FF',
      label: (d) => d.label,
      labelPlacement: 'center',
      labelFill: '#333',
    },
  },
  edge: {
    style: {
      stroke: '#e2e2e2',
    },
  },
});

graph.on(NodeEvent.CLICK, async (e) => {
  const nodeId = e.target.id;
  graph.updateNodeData([{ id: nodeId, size: 200 }]);
  await graph.render();
});

graph.render();

主要配置说明：

• preventOverlap: 开启节点重叠检测
• nodeSize: 设置节点大小
• gravity: 设置节点向心力
• iterations: 设置布局计算的精确程度

还可以参考 查看示例 获取更多用法。