G6 力导向布局（Force Layout）完全指南：物理模拟原理、配置项详解与实战示例

数据可视化前端图表库【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址https://gitcode.com/gh_mirrors/g6/G6点击查看免费下载力导向布局Force-Directed Layout是 G6 中最经典的图布局算法之一它通过模拟节点间的引力与斥力将复杂的关系网络自动排列成结构清晰、边交叉最少的形态非常适合社交网络、知识图谱、依赖关系等场景。本文以 ForceLayout.zh.md 为骨架结合 G6 仓库源码布局运行时、布局适配层、内置布局注册表与官方示例系统讲解力导向布局的物理模型、全部配置项、代码写法与调参技巧读完即可在项目中落地一个可交互的力导向图。概述什么是力导向布局力导向布局是一种基于物理模拟的图布局算法它通过模拟节点间的引力和斥力来确定节点的最终位置。这种布局方式特别适合展示复杂的关系网络如社交网络、知识图谱等。力导向布局会自动计算并调整节点位置使得相连的节点保持适当的距离同时尽量减少边的交叉。布局过程中会模拟物理系统节点会像带电粒子一样相互排斥边则像弹簧一样连接节点。力导向布局的主要特点包括自动排列不需要手动设置节点位置系统会自动找到合适的位置实时调整当你拖动某个节点时其他节点会实时跟随调整位置灵活配置可以调整节点间的吸引力和排斥力可以设置边的长度可以防止节点重叠动画效果节点移动时会有平滑的动画让变化更自然。在 G6 中force布局由antv/layout提供见 layouts/index.ts 的 re-export并通过内置注册表注册为type: force见 registry/build-in.ts。你还可以在 runtime/layout.ts 中看到布局实例的初始化过程布局的width、height默认取自画布尺寸viewport.getCanvasSize()center默认取画布中心未显式设置nodeSize时会自动从节点元素的size属性回退获取。核心概念把图当作一个物理系统Force 力导向布局基本原理力导向布局将图中的节点和边模拟为一个物理系统节点被视为物理粒子边被视为弹簧整个系统通过物理模拟达到能量最低状态即布局收敛。核心力详解力导向布局的核心由三种力叠加而成每种力都有对应的物理模型与可调参数。斥力Node Repulsion物理模型库伦定律Coulombs Law作用防止节点重叠让节点分布更均匀其中factor和coulombDisScale控制斥力的总体强度和范围公式k 为斥力系数即factor/coulombDisScale²q1、q2 为节点强度nodeStrengthr 为节点间距离k factor / coulombDisScale² F k · q1 · q2 / r²从公式可以看出斥力与距离的平方成反比——节点靠得越近受到的排斥越强这正是节点自动分散开来的物理来源。边拉力Edge Attraction物理模型胡克定律Hookes Law作用模拟边的拉力使节点沿着边的方向移动其中edgeStrength和linkDistance控制边的硬度和长度公式ka 为边拉力强度edgeStrengthL 为边理想长度linkDistancer 为实际边长度F ka · (r − L)当实际边长大于理想长度时产生拉力小于理想长度时产生推力使相连节点最终稳定在理想间距附近。向心力Gravity物理模型牛顿万有引力定律Newtons Universal Law of Gravitation作用使节点向画布中心或聚类中心聚集其中gravity和center控制重力强度和中心点位置公式G 为万有引力常数gravityxc 为中心点坐标centermass 为节点质量nodeSizeF G · mass · (xc − x) / r向心力保证了孤立的节点不会漂移到画布之外也让整体布局保持紧凑居中。三种力的相互作用物理模型力的相互作用产生加速度作用斥力、边拉力、向心力共同作用通过加速度叠加影响节点运动最终达到能量最低状态公式a F合 / mass物理系统节点运动速度公式公式v 为速度a 为加速度dt 为时间步长intervaldamping 为阻尼系数dampingv (v a · dt) · damping作用控制节点移动的稳定性阻尼系数防止系统震荡时间步长影响每次迭代的位移。节点位置公式公式x 为节点位置v 为节点速度dt 为时间步长intervalx x v · dt作用根据速度更新节点位置确保运动连续性通过preventOverlap防止节点重叠。聚类中心计算公式n 为聚类内节点数量(xi, yi) 为每个节点的位置xc (Σxi) / n, yc (Σyi) / n作用计算聚类中心向心力将节点拉向所属聚类中心聚类中心可动态变化。聚类强度计算公式s 为聚类强度clusterNodeStrengthxc 为聚类中心s |x − xc| · clusterNodeStrength作用控制聚类的紧密程度聚类强度越大聚类越紧凑可根据节点属性动态调整。质量对力的影响公式a 为加速度F 为力——斥力、边拉力、向心力mass 为节点质量a F / mass作用质量大的节点移动较小质量小的节点移动较大通过getMass可自定义质量计算。能量计算公式m 为节点质量v 为节点速度E (1/2) · m · v²作用监控布局收敛情况能量趋近于零时系统趋于稳定。系统收敛条件公式move为迭代间节点的移动量minMovement为收敛阈值mean/max/min(|move|) minMovement作用控制迭代次数移动量小于阈值时停止通过distanceThresholdMode可选择平均值mean、最大值max或最小值min三种判定模式。力相互作用图上述四种力斥力、边拉力、向心力以及由此产生的加速度与位移共同构成了一个完整的物理仿真循环每个迭代周期内计算合力 → 更新速度 → 更新位置 → 计算能量判断是否收敛。这也是 runtime/layout.ts 中迭代型布局的执行模型带动画时通过onTick回调逐帧更新节点位置animate: true无动画时先execute再stop最后tick(iterations)一次性返回终态位置。配置项详解根据上述力导向布局的物理特性G6 提供了以下配置项。基础配置属性描述默认值必选type布局类型force✓dimensions布局维度2 表示 2D 布局3 表示 3D 布局2width布局宽度画布宽度height布局高度画布高度center布局的中心点图中心maxIteration最大迭代次数若为 0 则将自动调整0minMovement当平均移动距离小于 0.4 时停止迭代0.4distanceThresholdMode移动距离的计算模式mean平均移动距离小于minMovement时停止迭代max最大移动距离小于minMovement时停止迭代min最小移动距离小于minMovementmeanmaxDistance最大距离其中width、height、center在 runtime/layout.ts 中会被自动填充width/height默认取画布尺寸center默认取画布中心若你显式配置了这些值则会覆盖默认值。力相关配置斥力配置属性描述默认值必选nodeStrength节点作用力正数代表节点之间的引力作用负数代表节点之间的斥力作用1000factor斥力系数数值越大斥力越大1coulombDisScale库伦系数斥力的一个系数数字越大节点之间的斥力越大0.005边拉力配置属性描述默认值必选edgeStrength边的作用力引力大小固定作用力或回调函数动态返回不同边的作用力500linkDistance边的长度固定长度或回调函数动态返回不同边的长度200edgeStrength与linkDistance都支持传入回调函数例如linkDistance: (d) d.source.data.size d.target.data.size可针对不同边返回不同的理想长度实现节点越大边越长的个性化布局。向心力配置属性描述默认值必选gravity向中心力大小指所有节点被吸引到 center 的力。数字越大布局越紧凑10centripetalOptions向心力配置包括叶子节点、离散点、其他节点的向心中心及向心力大小。leaf叶子节点向心力single单点向心力others其他节点向心力center自定义中心点函数[0, 0]centripetalOptions是向心力精细化控制的核心通过leaf、single、others分别为叶子节点、孤立节点、其余节点设置不同的向心强度可以让树状或星状结构呈现出清晰的层级视觉。聚类配置属性描述默认值必选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聚类配置非常适合对带分类字段的数据如社交网络中的兴趣分组、知识图谱中的领域分类进行视觉分组只需指定nodeClusterBy字段同类节点就会被向心力拉拢到各自聚类中心周围形成自然的簇结构。性能与优化配置属性描述默认值必选damping阻尼系数取值范围 [0, 1]。数字越大速度降低得越慢0.9maxSpeed一次迭代的最大移动长度200interval控制每个迭代节点的移动速度0.02preventOverlap是否防止重叠必须配合nodeSize或节点数据中的data.size属性使用只有在数据中设置了data.size或在该布局中配置了与当前图节点大小相同的nodeSize值才能够进行节点重叠的碰撞检测truenodeSize节点大小直径。用于防止节点重叠时的碰撞检测固定大小或者回调函数动态返回节点大小nodeSpacingpreventOverlap为true时生效防止重叠时节点边缘间距的最小值。可以是回调函数为不同节点设置不同的最小间距collideStrength防止重叠的力强度范围 [0, 1]1特别提醒preventOverlap的碰撞检测依赖节点尺寸。在 G6 中即使你不配置nodeSizeruntime/layout.ts 也会自动从节点的元素尺寸element.getComputedStyle得到的size或节点数据中的data.size回退获取因此节点大小能反映真实渲染尺寸是防止重叠生效的前提。其他配置属性描述默认值必选getMass获取节点质量的回调函数入参为节点内部流转数据用于计算节点质量大小getCenter每个节点中心力的 x、y、强度的回调函数若不指定则没有额外中心力onTick每一次迭代的回调函数monitor每个迭代的监控信息回调energy 表示布局的收敛能量。若配置可能带来额外的计算能量性能消耗不配置则不计算。入参为迭代监控信息{ energy: number; nodes: Node[]; edges: Edge[]; iterations: number; }onTick是接入动画与实时交互的窗口在 G6 的 runtime/layout.ts 中开启布局动画animation: true时布局引擎会以onTick回调逐步把每帧位置同步给画布从而呈现节点逐渐稳定下来的物理模拟动画过程。代码示例基础用法最简单的力导向布局只需要声明type: force其余参数均使用默认值const graph new Graph({ container: container, layout: { type: force, // 防止节点重叠 preventOverlap: true, // 节点大小 nodeSize: 20, // 布局宽度 width: 800, // 布局高度 height: 600, }, });防止节点重叠节点重叠是关系图最常见的视觉问题开启preventOverlap并正确提供节点尺寸即可解决const graph new Graph({ layout: { type: force, // 防止节点重叠 preventOverlap: true, // 节点大小 nodeSize: 20, }, });注意nodeSize为节点直径若你的节点渲染尺寸各不相同推荐传入回调函数nodeSize: (d) d.data.size与节点数据中的size字段保持一致碰撞检测会更精确。完整示例创建一个可交互的力导向图该示例展示了如何使用力导向布局创建一个基础的力导向图并结合节点点击事件演示布局的实时调整能力。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设置布局计算的精确程度迭代型布局的执行次数见 runtime/layout.ts 中的iterations 300默认值。示例中的graph.on(NodeEvent.CLICK, ...)展示了力导向布局实时调整的特性点击某个节点将其size从 20 增大到 200 后重新渲染由于节点质量/尺寸变化会影响受力周围节点会随之重新排布形成平滑的位移动画。进阶调参思路在 G6 仓库的官方示例 layout-force.ts 中力导向布局与palette分组着色配合使用根据节点数据中的cluster字段为不同聚类的节点分配颜色配合drag-element、click-select等行为构成了典型的关系网络分析场景。从中可以提炼出以下调参思路节点太挤、连成一片增大factor、coulombDisScale或减小gravity让斥力占主导节点太散、结构不清晰增大gravity、edgeStrength或减小linkDistance让边拉力与向心力占主导图持续抖动、无法收敛降低damping或减小interval时间步长提高系统稳定性需要按类别分组展示设置clustering: true与nodeClusterBy: cluster配合clusterNodeStrength控制聚类紧密程度节点大小差异明显时为nodeSize、linkDistance、edgeStrength传入基于节点数据的回调函数让力学参数与真实视觉尺寸匹配。小结力导向布局是 G6 中功能最丰富、可调性最强的布局之一它以库伦斥力、胡克边拉力、万有引力向心力为三大物理支柱通过速度、位置、质量、能量与收敛判定等物理量构成完整的仿真循环。结合本文的配置项表格与代码示例你可以针对社交网络、知识图谱、依赖关系等场景快速搭建出分布均匀、可交互、可动画的力导向图进一步的源码阅读入口包括 runtime/layout.ts布局执行与动画调度、utils/layout.tsantv/layout适配层以及 layout-force.ts官方示例。赞分享数据可视化前端图表库【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址https://gitcode.com/gh_mirrors/g6/G6点击查看免费下载相关推荐Tolaria 的 Neighborhood 模式基于 entity 选区的笔记关系浏览如何实现Tolaria 的 Neighborhood 模式基于 entity 选区的笔记关系浏览如何实现 Tolaria 是一个基于 Markdown 文件库Vau数据可视化前端图表库G6 布局 API 完全指南setLayout / getLayout / layout / stopLayout 与布局配置实战G6 布局 API 完全指南setLayout / getLayout / layout / stopLayout 与布局配置实战 G6 antv/g6数据可视化前端图表库深入解析 G6 蛇形布局Snake Layout原理、配置与实战深入解析 G6 蛇形布局Snake Layout原理、配置与实战 蛇形布局Snake Layout是 G6 中一种面向 长链结构 的专用布局算法它将数据可视化前端图表库上一篇VMware macOS虚拟机终极解锁指南Unlocker 3.0完全解析与实战应用下一篇5分钟掌握PUBG罗技鼠标宏新手必看的自动压枪终极教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考