G6 ComboCombined 复合布局从配置到源码的完整实战指南【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址: https://gitcode.com/gh_mirrors/g6/G6本指南围绕 G6antv/g6内置的 ComboCombined 复合布局展开讲解它如何在同一张图中为 Combo 内部元素与最外层 Combo/节点分别编排布局覆盖全部配置项说明、按层级动态指定布局的进阶用法、可直接运行的完整示例并深入到 G6 源码与测试用例帮助读者在用户画像、供应链等复合分组场景中快速落地并理解其底层执行机制。概述ComboCombined复合布局type 为combo-combined是 G6 面向复合分组结构图数据设计的布局方案。它允许在一张图中灵活配置两层布局内部布局innerLayoutCombo 内部元素之间的布局方式外部布局outerLayout最外层 Combo 与游离节点之间的布局方式。默认情况下内部元素采用 Concentric 同心圆布局外部布局采用 gForce 力导向布局从而在布局效果与整体稳定性之间取得平衡。从实现上看ComboCombinedLayout并非 G6 自研而是由布局库antv/layout提供G6 在 layouts/index.ts 中将其与其他布局Circular、Dagre、Force、Fruchterman、Grid、Radial 等一同导出并通过内置注册表将字符串combo-combined映射到该类见 build-in.ts。这意味着在Graph配置中直接写type: combo-combined即可使用无需额外引入。使用场景复合布局面向“数据天然具有分组层级”的图结构典型场景包括用户画像分析将用户兴趣圈层作为 Combo内部节点展示具体商品和行为标签通过边表达用户行为与商品的关系帮助运营人员识别用户消费路径。供应链管理图供应商、制造商、仓储、分销商按角色或区域划分 Combo内部节点展示资源、人员或设备清晰展示供应链各环节的内部结构同时外层仍能保持整体布局的可读性。这类场景的共同特征是分组内部需要紧凑、规律的排列如同心圆分组之间则希望通过力导向等布局自然疏离——这正是 ComboCombined 双层布局的设计初衷。配置项ComboCombined 布局支持以下配置项属性描述类型默认值必选type布局类型combo-combined-✓center布局中心PointTuple图中心layout布局配置。可固定指定也可根据comboId动态返回string|object|(comboId?: string) string \| object-nodeSize节点大小直径。用于碰撞检测number|number[]|(d?: NodeData) number-nodeSpacing节点间距number|(d?: NodeData) number-comboSpacingCombo 之间的间距number|(d?: unknown) number-comboPaddingCombo 内部的 padding 值不用于渲染仅用于计算力。推荐设置为与视图上 Combo 内部 padding 值相同的值((d?: unknown) number)|number|number[]|undefined-要点说明type必填取值为combo-combined用于在 G6 内置注册表中定位布局实现。center布局的几何中心不传时默认为图画布中心。nodeSize / nodeSpacing两者都参与碰撞检测。nodeSize是节点的直径nodeSpacing是节点之间的间隙均支持传函数按节点动态计算——函数的入参即 NodeData 节点数据可基于节点属性返回个性化数值。comboSpacing控制 Combo 与 Combo 之间的距离。comboPadding⚠️ 特别注意该值不参与渲染仅用于力计算。它应当与视图上 Combo 的真实内部 padding即 combo 样式中的padding保持一致否则力计算边界与实际显示范围会出现偏差。上述各间距/尺寸参数在 G6 测试用例中有直接应用可参考 layout-combo-combined.tslayout: { type: combo-combined, comboPadding: 10, nodeSpacing: 20, comboSpacing: 80, },这里comboPadding: 10与同一 demo 中 combo 样式的padding: 10layout-combo-combined.ts保持一致正是文档推荐用法的实践范例。layout 字段详解类型string | object | (comboId?: string) string | object自 G6 5.1 版本起官方推荐使用单个layout字段为不同层级选择布局而不是分别配置innerLayout与outerLayout旧字段已被取代。layout支持三种形态字符串直接指定某一种布局类型如grid对象指定布局类型及其参数如{ type: grid, cols: 4 }函数接收comboId参数可选返回布局类型字符串或配置对象实现按层级动态分发布局。函数形态示例new Graph({ layout: { type: combo-combined, layout: (comboId) (comboId ? { type: grid } : { type: force }), }, });上述代码表达的策略是当comboId存在即当前是某个 Combo 的内部元素时使用grid网格布局当comboId为空即最外层 Combo 与游离节点时使用force力导向布局。由此可以实现“内部规整、外部受力牵引”的混合效果。完整示例代码以下示例加载 G6 官方示例数据含 Combo 分组的图数据使用 ComboCombined 布局并开启拖拽、缩放等交互。完整代码也保存在 站点示例 demo/combo-combined.js 中import { Graph } from antv/g6; fetch(https://assets.antv.antgroup.com/g6/combo.json) .then((res) res.json()) .then((data) { const graph new Graph({ container: container, data, layout: { type: combo-combined, comboPadding: 2, }, node: { style: { size: 20, labelText: (d) d.id, }, palette: { type: group, field: (d) d.combo, }, }, edge: { style: (model) { const { size, color } model.data; return { stroke: color || #99ADD1, lineWidth: size || 1, }; }, }, behaviors: [drag-element, drag-canvas, zoom-canvas], autoFit: view, }); graph.render(); });示例中的几个关键点数据combo.json是包含 combo 分组关系的官方示例数据集仓库中的同名数据集位于 packages/g6/tests/dataset/combo.json可直接用于本地测试。节点调色板palette配置为group类型并按d.combo分组取色让不同 Combo 的节点一眼可辨。边样式根据边的原始数据动态设置描边色与线宽。交互与视野配置drag-element、drag-canvas、zoom-canvas三个内置行为并开启autoFit: view渲染后自动将整图适配到视口。注意示例数据通过远程地址 fetch 获取若在离线或内网环境可改用本地 JSON 文件或直接以对象形式传入data。源码视角布局是如何被调度执行的ComboCombined 布局在 G6 中的执行链路清晰理解它有助于排查布局不生效、位置异常等问题。1. 注册与解析G6 内置注册表 build-in.ts 中登记了combo-combined: ComboCombinedLayout。当你在layout中声明type: combo-combined时G6 会通过 registry 机制解析出对应的布局类并实例化。该布局类从antv/layout导入见 layouts/index.ts因此布局的核心算法内部同心圆 外部力导向、碰撞检测、间距计算由antv/layout提供。2. 运行时调度布局由 LayoutController 统一调度。其中preLayoutruntime/layout.ts#L62-L88在首次绘制前执行布局结果模拟出的 nodes/edges/combos 位置通过simulate()获得并回写到节点、边、Combo 的样式node.style、edge.style、combo.style中postLayoutruntime/layout.ts#L96-L117则在绘制完成后执行支持传入布局管线数组按顺序执行多个布局。布局前后会触发BEFORE_LAYOUT/AFTER_LAYOUT、BEFORE_STAGE_LAYOUT/AFTER_STAGE_LAYOUT等生命周期事件可在这些事件中监听并干预布局过程。此外布局执行时会向模型回写数据model.syncNodeLikeDatum等保证图数据与画布位置同步。3. Combo 数据参与布局postLayout阶段会从模型读取 nodes、edges、combos 三类数据runtime/layout.ts#L294并按comboFilter筛选需要参与布局的 Combo最终将 Combo 与普通节点一并交给布局算法处理这正是 ComboCombined 能够“内层外层一起排”的数据基础。测试验证仓库如何保证布局质量G6 为 ComboCombined 布局提供了快照测试见 combo-layout.spec.tsit(combined, async () { const graph await createDemoGraph(layoutComboCombined); await expect(graph).toMatchSnapshot(__filename, combined); graph.destroy(); });测试通过createDemoGraph渲染 layoutComboCombined 这个 demo即上文配置了comboPadding: 10、nodeSpacing: 20、comboSpacing: 80的场景并将渲染结果与 SVG 快照比对。值得注意的细节是测试在beforeEach中调用了mockRandom()固定随机数——这是因为外层默认的力导向布局gForce依赖随机初始化固定随机种子可以保证快照可复现。如果你在自己的应用中通过组合布局得到了“每次渲染位置都不一样”的结果这正是力导向布局随机初始化的正常表现属于预期行为。相关资源布局总览manual/layout/overview.zh.md布局基类 BaseLayoutmanual/layout/BaseLayout.zh.md站点示例含可交互 Demo 与截图examples/layout/combo-layout/index.zh.md布局实现导出packages/g6/src/layouts/index.ts内置注册packages/g6/src/registry/build-in.ts布局运行时调度packages/g6/src/runtime/layout.ts单元测试packages/g6/tests/unit/layouts/combo-layout.spec.ts【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址: https://gitcode.com/gh_mirrors/g6/G6创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
企业数字化 ERP 产品动态
相关推荐
PSO-LSTM股票调整收盘价预测：Python源码实现与调参实战 简介：这套基于PSO-LSTM神经网络的股票调整收盘价预测源码，专为需要完成期末大作业或课程设计的Python学习者准备，适合有一定神经网络基础但希望快速搭建完整项目的新手。资源包含10个文件，以7个csv数据文件为主，覆盖DJ… · 2026/9/23 17:59:59
LSTM时间序列预测Python实现：从数据预处理到模型评估完整指南 简介：面向时间序列预测课程设计与期末大作业场景，这份基于LSTM模型的Python实现压缩包提供了可复现的完整方案。代码围绕股票收盘价预测展开，包含核心训练脚本、源数据、Markdown分析报告和模型结构讲解图，既能支撑作业演示&#… · 2026/9/23 17:59:58
2026最新苍井空在线爱手写实现：解决配置卡壳的性能优化实战 2026最新苍井空在线爱手写实现：解决配置卡壳的性能优化实战 配置环境就卡半天，这是很多刚接触性能优化同学的第一印象。你以为只是装个包、配个依赖那么简单？错。真正的坑在于资源调度与内存管理的底层逻辑。2026最新的技术栈对并发处理提出了更高… · 2026/9/23 17:59:52
用C#解析STEP文件：从ISO-10303-21文本到B-Rep拓扑提取 简介：基于C#的STEP文件解析器完整源码与项目说明，属于本科毕设项目，主要面向计算机相关专业毕业生及需要工程实战的C#学习者。项目围绕STEP中性文件解析展开，实现了对文件中各组成元素的类型识别、详细信息提取，以及拓… · 2026/9/23 18:39:01
路由器IP地址怎么改速查：3种方案完整示例 路由器IP地址怎么改速查：3种方案完整示例 配置环境就卡半天？别急，改个路由器IP地址不该这么难。很多人对着后台界面发呆，输错一次网关就断网，折腾半小时还没搞定。其实只要理清底层逻辑，配合 完整示例… · 2026/9/23 18:38:55
KMeans聚类在宿舍分配中的实战：特征工程到K值选择 简介：针对高校宿舍分配场景，这份基于KMeans聚类算法的Python源码包提供了从数据预处理、模型训练到结果可视化的完整实现，适合需要将无监督学习落地到实际管理问题的数据科学初学者或高校信息管理相关技术人员。压缩包共13个文件，… · 2026/9/23 18:38:43
fpm 构建 Solaris SRV4 软件包（solaris 输出格式）完全指南 fpm 构建 Solaris SRV4 软件包（solaris 输出格式）完全指南 【免费下载链接】fpm Effing package management! Build packages for multiple platforms (deb, rpm, etc) with great ease and sanity. 项目地址: https://gitcode.com/gh_mirrors/fp/fpm … · 2026/9/23 18:38:43
Java Swing数独游戏工程级实现与难度控制 简介：本资源是一份面向Java初学者与课程设计实践者的完整数独小游戏开发项目，适用于高校Java程序设计、GUI编程或软件工程类课程作业参考。项目基于Swing构建图形界面，代码结构清晰，涵盖游戏逻辑、难度生成、用户交互及资源管理等… · 2026/9/23 18:38:43
Fedora开发环境避坑指南：保姆级教程解决常见报错 Fedora开发环境避坑指南：保姆级教程解决常见报错 盯着屏幕上一片红色的StackTrace，是不是感觉脑子瞬间宕机？刚把Fedora装好，连个Python环境都跑不通，报错信息长得像天书，根本不知道从哪下手。别慌，这份保姆级教程就是为你… · 2026/9/23 18:38:43
3招搞定手机怎么下载微信面试难题实战项目解析 3招搞定手机怎么下载微信面试难题实战项目解析 面试被问“手机怎么下载微信”背后的原理，90%的人答不上来。别笑，这看似弱智的问题，实则是考察你对移动应用分发机制、安全校验及网络协议理解的试金石。我带过不少校招新人，他们背了八股文，却连一个A… · 2026/9/23 0:00:03
你有新短消息请注意查收：3个新手避坑指南搞定消息系统选型 你有新短消息请注意查收：3个新手避坑指南搞定消息系统选型 面试被问“高并发下如何保证消息不丢失”，你张口就是“用Redis”，结果面试官追问“如果Redis宕机了怎么办”，你瞬间卡壳。这种场景太常见了，很多新手在背八股文时，只记住了技术名词… · 2026/9/23 0:00:29
