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），仅供参考