G6 Force 力导向布局实战指南物理模拟原理、配置项与代码示例【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址: https://gitcode.com/gh_mirrors/g6/G6力导向布局Force-directed Layout是 G6 内置的基于物理模拟的图布局算法通过模拟节点间的引力与斥力自动确定节点位置特别适合社交网络、知识图谱等复杂关系网络的展示。读完本文你将完整掌握 G6 中force布局的物理模型原理节点斥力、边拉力、向心力能够熟练运用全部配置项含聚类、防重叠、性能优化并可直接运行文中的可交互示例代码。概述力导向布局是一种基于物理模拟的图布局算法它通过模拟节点间的引力和斥力来确定节点的位置。这种布局方式特别适合展示复杂的关系网络如社交网络、知识图谱等。力导向布局会自动计算并调整节点位置使得相连的节点保持适当的距离同时尽量减少边的交叉。布局过程中会模拟物理系统节点会像带电粒子一样相互排斥边则像弹簧一样连接节点。力导向布局的主要特点包括自动排列不需要手动设置节点位置系统会自动找到合适的位置实时调整当你拖动某个节点时其他节点会实时跟随调整位置灵活配置可以调整节点间的吸引力和排斥力可以设置边的长度可以防止节点重叠动画效果节点移动时会有平滑的动画让变化更自然在 G6 中force布局属于内置布局之一。从源码看ForceLayout由 G6 从antv/layout包中导入并注册注册表位于 packages/g6/src/registry/build-in.ts注册的类型键为force同时支持gforce别名见 packages/g6/src/layouts/types.ts因此在使用时只需在layout配置中声明type: force即可。核心概念力导向布局基本原理力导向布局是一种基于物理模拟的图布局算法它将图中的节点和边模拟为物理系统节点被视为物理粒子边被视为弹簧整个系统通过物理模拟达到能量最低状态核心力详解斥力Node Repulsion物理模型库伦定律Coulombs Law作用防止节点重叠让节点分布更均匀其中factor和coulombDisScale控制斥力的总体强度和范围。公式F k * (q1 * q2) / r²k斥力系数等于factor / coulombDisScale²q1、q2节点强度对应配置项nodeStrengthr节点间距离边拉力Edge Attraction物理模型胡克定律Hookes Law作用模拟边的拉力使节点沿着边的方向移动其中edgeStrength和linkDistance控制边的“硬度”和长度。公式F ka * (r - L)ka边拉力强度对应配置项edgeStrengthL边的长度对应配置项linkDistancer实际边长度向心力Gravity物理模型牛顿万有引力定律Newtons Universal Law of Gravitation作用使节点向画布中心或者聚类中心聚集其中gravity和center控制重力强度和中心点位置。公式F G * mass / r²方向指向中心点(xc, yc)G万有引力常数对应配置项gravityxc中心点坐标对应配置项centermass节点质量对应配置项nodeSize三种力的相互作用物理模型力的相互作用产生加速度作用斥力、边拉力、向心力共同作用通过加速度叠加影响节点运动最终达到能量最低状态。公式a (F_repulsion F_attraction F_gravity) / mass物理系统节点运动速度公式公式v_new (v_old a * dt) * dampingv速度a加速度dt时间步长对应配置项intervaldamping阻尼系数对应配置项damping作用控制节点移动的稳定性阻尼系数防止系统震荡时间步长影响每次迭代的位移节点位置公式公式x_new x_old v * dtx节点位置v节点速度dt时间步长interval作用根据速度更新节点位置确保运动连续性通过preventOverlap防止节点重叠聚类中心计算公式center (Σxi / n, Σyi / n)n聚类内节点数量(xi, yi)每个节点的位置作用计算聚类中心向心力将节点拉向所属聚类中心聚类中心可动态变化聚类强度计算公式F s * (x - xc)s聚类强度对应配置项clusterNodeStrengthxc聚类中心作用控制聚类的紧密程度聚类强度越大聚类越紧凑可根据节点属性动态调整质量对力的影响公式a F / massa加速度F力斥力、边拉力、向心力mass节点质量作用质量大的节点移动较小质量小的节点移动较大通过getMass可自定义质量计算能量计算公式E Σ (m * v²) / 2m节点质量v节点速度作用监控布局收敛情况能量趋近于零时系统趋于稳定系统收敛条件公式movement distance(new_pos, old_pos)当movement minMovement时停止迭代作用控制迭代次数移动量小于阈值时停止通过distanceThresholdMode可选择平均值、最大值或最小值力相互作用流程整个布局的迭代过程可以用下面的流程图表示可以看到每次迭代都会依次计算斥力、边拉力、向心力然后更新速度与位置直到满足收敛条件或达到maxIteration才输出最终布局。配置项根据上述力导向布局的物理特性G6 为force布局提供了以下配置项。基础配置属性描述默认值必选type布局类型force✓dimensions布局维度2 表示 2D 布局3 表示 3D 布局2width布局宽度画布宽度height布局高度画布高度center布局的中心点图中心maxIteration最大迭代次数若为 0 则将自动调整0minMovement当平均移动距离小于 0.4 时停止迭代0.4distanceThresholdMode移动距离的计算模式mean平均移动距离小于minMovement时停止迭代max最大移动距离小于minMovement时停止迭代min最小移动距离小于minMovement时停止迭代meanmaxDistance最大距离力相关配置斥力配置属性描述默认值必选nodeStrength节点作用力正数代表节点之间的引力作用负数代表节点之间的斥力作用1000factor斥力系数数值越大斥力越大1coulombDisScale库伦系数斥力的一个系数数字越大节点之间的斥力越大0.005边拉力配置属性描述默认值必选edgeStrength边的作用力引力大小固定作用力或回调函数动态返回不同边的作用力500linkDistance边的长度固定长度或回调函数动态返回不同边的长度200向心力配置属性描述默认值必选gravity向中心力大小指所有节点被吸引到 center 的力。数字越大布局越紧凑10centripetalOptions向心力配置包括叶子节点、离散点、其他节点的向心中心及向心力大小。leaf叶子节点向心力single单点向心力others其他节点向心力center自定义中心点函数[0, 0]聚类配置属性描述默认值必选clustering是否需要全部节点聚类若为true将使用nodeClusterBy配置的节点数据中的字段作为聚类依据。centripetalOptions.single、centripetalOptions.leaf、centripetalOptions.others将使用getClusterNodeStrength返回值leaf、centripetalOptions.center将使用当前节点所属聚类中所有节点的平均中心falsenodeClusterBy指定节点数据中的字段名称作为节点聚类的依据clustering为 true 时生效自动生成centripetalOptions可配合clusterNodeStrength使用clusterNodeStrength配合clustering和nodeClusterBy使用指定聚类向心力的大小leafCluster是否需要叶子节点聚类若为true则centripetalOptions.single将为 100centripetalOptions.leaf将使用getClusterNodeStrength返回值getClusterNodeStrength.center将为叶子节点返回当前所有叶子节点的平均中心false性能与优化配置属性描述默认值必选damping阻尼系数取值范围 [0, 1]。数字越大速度降低得越慢0.9maxSpeed一次迭代的最大移动长度200interval控制每个迭代节点的移动速度0.02preventOverlap是否防止重叠必须配合下面属性nodeSize或节点数据中的data.size属性只有在数据中设置了data.size或在该布局中配置了与当前图节点大小相同的nodeSize值才能够进行节点重叠的碰撞检测truenodeSize节点大小直径。用于防止节点重叠时的碰撞检测固定大小或者回调函数动态返回节点大小nodeSpacingpreventOverlap为true时生效防止重叠时节点边缘间距的最小值。可以是回调函数为不同节点设置不同的最小间距collideStrength防止重叠的力强度范围 [0, 1]1其他配置属性描述默认值必选getMass获取节点质量的回调函数入参为节点内部流转数据用于计算节点质量大小getCenter每个节点中心力的 x、y、强度的回调函数若不指定则没有额外中心力onTick每一次迭代的回调函数monitor每个迭代的监控信息回调energy 表示布局的收敛能量。若配置可能带来额外的计算能量性能消耗不配置则不计算。入参为迭代监控信息{ energy: number; nodes: Node[]; edges: Edge[]; iterations: number; }需要说明的是force布局作为迭代式布局同样支持 packages/g6/src/layouts/types.ts 中定义的通用布局能力例如iterations迭代次数供 WebWorker 场景使用、enableWorker是否在 WebWorker 中运行布局避免阻塞主线程渲染、animation是否在两次迭代之间做动画过渡等。此外preLayout可在初始化元素前先完成布局计算。这些配置在布局选项类型上对所有内置布局统一生效。代码示例基础用法最简单的力导向布局配置如下只需声明type: force并可选地配置画布尺寸与防重叠参数const graph new Graph({ container: container, layout: { type: force, // 防止节点重叠 preventOverlap: true, // 节点大小 nodeSize: 20, // 布局宽度 width: 800, // 布局高度 height: 600, }, });防止节点重叠力导向布局中最常见的诉求是节点不重叠。开启preventOverlap并给出nodeSize即可启用碰撞检测也可以在节点数据中设置size字段布局会读取数据中的data.size参与碰撞检测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或节点数据中的size字段使用nodeSize设置节点大小作为碰撞检测的直径依据gravity设置节点向心力数值越大布局越紧凑iterations设置布局计算的精确程度迭代次数越多布局越趋于稳定收敛深入理解与进阶实践从源码理解 force 布局的定位在 G6 中force布局的底层实现并不在 G6 仓库内而是由 G6 从antv/layout包导入并暴露见 packages/g6/src/layouts/index.ts随后在 packages/g6/src/registry/build-in.ts 的layout注册表中以force键注册。同时注册的还有同属物理模拟家族的gforce即上述ForceLayout的别名、d3-forceD3 力导向与force-atlas2等你可以根据需求选择不同的力模型实现。布局的迭代流程与收敛控制则由 packages/g6/src/runtime/layout.ts 统一调度迭代式布局如force会按iterations或收敛条件反复执行并可通过onTick感知每次迭代的中间状态。布局结果的实时响应力导向布局的“实时调整”特性意味着当图数据发生变化如新增/删除节点、边或通过updateNodeData修改节点属性并调用render()重新渲染时force布局会基于当前物理状态继续模拟而不是从零开始因此你会看到其他节点平滑地“跟随”调整位置——这正是社交网络、知识图谱等动态数据场景选择力导向布局的重要原因。聚类与自定义向心力当数据天然存在分组属性时可以结合clustering与nodeClusterBy让同一聚类内的节点自动聚拢若希望叶子节点单独成簇可开启leafCluster。更精细的需求如按节点属性动态计算质量、为不同节点指定不同的向心中心则可使用getMass、getCenter回调实现它们入参为节点内部流转数据返回值参与物理计算。性能优化建议大图场景建议将迭代式布局放入 WebWorkerenableWorker: true执行避免阻塞主线程交互仅在需要观察收敛过程时才配置monitor因为该回调会引入额外的能量计算开销合理设置maxIteration、minMovement与distanceThresholdMode在布局效果与计算耗时之间取得平衡开启preventOverlap前务必确认nodeSize与图中节点实际大小一致否则碰撞检测可能失效或产生异常斥力。更多资料布局总览与选型packages/site/docs/manual/layout/overview.zh.md中文版力导向布局文档packages/site/docs/manual/layout/ForceLayout.zh.md力导向布局示例 Demo含交互与防重叠场景packages/g6/tests/demos/layout-force.ts、packages/g6/tests/demos/layout-force-collision.ts布局注册表内置布局一览packages/g6/src/registry/build-in.ts布局类型定义通用布局能力与 force 别名packages/g6/src/layouts/types.ts【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址: https://gitcode.com/gh_mirrors/g6/G6创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考