G6 Grid 网格布局完全指南：从基础配置到防重叠、排序与定点布局实战

数据可视化前端图表库【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址https://gitcode.com/gh_mirrors/g6/G6点击查看免费下载导读Grid网格布局是 G6AntV G6一个 JavaScript 图可视化框架内置的一种非迭代布局它将所有节点按行、列整齐地排布成网格状特别适合矩阵/表格型数据可视化、仪表盘、数据字典等需要规整有序呈现的场景。本文以官方文档 GridLayout.en.md 为主线结合仓库中的注册表、运行时与测试代码系统讲解 Grid 布局的配置项、默认值、防重叠机制、排序策略以及动态更新布局的完整实战方案。Grid 布局概述与适用场景Grid 布局的核心能力是把节点放入一个规则的行列网格中与力导向、圆形等强调拓扑关系的布局不同Grid 布局不追求还原关系而是追求排布整齐支持根据节点数量、布局区域尺寸自动计算行数/列数也可以手动指定rows/cols支持通过nodeSize/nodeSpacing进行碰撞检测避免节点相互重叠支持按节点属性排序让数值更大的节点更靠近中心支持通过position手动指定特定节点所在的单元格。从仓库源码看Grid 布局在 G6 中属于注册在案的内置布局packages/g6/src/registry/build-in.ts#L166其类型定义继承自BaseLayoutOptions并标注type: gridpackages/g6/src/layouts/types.ts#L108-L110实际算法由antv/layout提供。典型适用场景矩阵、表格形式的数据可视化例如班级座位表、机房机柜、仓库货位需要把一组互不关联或关系较弱的节点进行规整陈列的场景作为组合布局的兜底排版或配合sortBy做集群分组展示。快速上手最小可用配置最简单的 Grid 布局只需声明type: grid并指定行列数即可。以下配置会生成 25 个节点5×5 网格与 20 条随机连线const graph new Graph({ layout: { type: grid, cols: 5, rows: 5, }, data: { nodes: Array.from({ length: 25 }, (_, i) ({ id: node-${i}, data: { value: Math.random() * 100, }, })), edges: Array.from({ length: 20 }, (_, i) ({ id: edge-${i}, source: node-${Math.floor(Math.random() * 25)}, target: node-${Math.floor(Math.random() * 25)}, })), }, });一个可运行的完整示例带容器与渲染调用import { Graph } from antv/g6; const graph new Graph({ container: container, width: 600, height: 400, layout: { type: grid, cols: 5, rows: 5, }, data: { nodes: Array.from({ length: 25 }, (_, i) ({ id: node-${i}, data: { value: Math.random() * 100 }, })), edges: Array.from({ length: 20 }, (_, i) ({ id: edge-${i}, source: node-${Math.floor(Math.random() * 25)}, target: node-${Math.floor(Math.random() * 25)}, })), }, node: { style: { size: 20, label: true, labelText: (datum) datum.id, labelBackground: true, }, }, edge: { style: { stroke: #bfbfbf, }, }, }); graph.render();说明节点数据里塞入data.value等自定义字段可以为后续的sortBy排序、palette分组着色等能力做准备。配置项详解每个参数的行为与默认值Grid 布局的完整配置在 GridLayout.en.md 中以表格形式给出下面逐项展开说明。标准配置写法const graph new Graph({ layout: { type: grid, begin: [0, 0], cols: 5, rows: 5, width: 300, height: 300, preventOverlap: true, nodeSize: 30, condense: false, }, });参数总表PropertyDescriptionTypeDefaultRequiredtype布局类型grid-✓begin网格起始位置左上角坐标默认[0, 0][number, number][0, 0]cols列数。若未定义算法会根据节点数量、布局空间及 rows若设置自动计算numberundefinedrows行数。若未定义算法会根据节点数量、布局空间及 cols若设置自动计算number10width布局区域宽度。在 G6 中默认使用容器宽度number300height布局区域高度。在 G6 中默认使用容器高度number300condensefalse 时使用全部可用画布空间true 时使用最小画布空间booleanfalsenodeSize节点尺寸直径用于防重叠时的碰撞检测Size | ((nodeData: Node) Size)-nodeSpacing节点间距用于调整节点之间的空隙((node?: Node) number) | number-position为每个节点指定所在行列(node?: Node) { row?: number; col?: number; }undefinedpreventOverlap是否防止节点重叠。需要节点数据中存在 nodeSize 或 size 属性booleanfalsepreventOverlapPadding防重叠时的内边距。仅在 preventOverlap 为 true 时生效number10sortBy排序依据节点属性名。数值越大的节点越靠近中心。若未定义则按度degree排序stringundefined核心参数深度解读cols 与 rows行列数两者互为补足关系只给cols时行数由节点总数自动推导只给rows时列数自动推导都未设置时按行数为 10 的默认逻辑计算。手动指定时需确保cols * rows 节点数否则多余节点会被截断到网格范围之外。官方在线 Demo 提供了 210 的调节范围GridLayout.en.md。width 与 height布局区域决定网格可铺陈的空间。需要注意官方文档特别注明在 G6 中布局宽度默认使用容器宽度而当 Grid 布局单独使用未接容器时默认值为 300。从源码看width/height同样被声明在BaseLayoutOptions中默认取画布尺寸packages/g6/src/layouts/types.ts#L86-L96。condense紧凑模式false默认网格占满整个可用布局空间节点之间的间距会被均匀拉大视觉上更松散true按最小必要空间排布节点紧凑靠拢适合节点数量多、画布有限的情况。nodeSize 与 nodeSpacing尺寸与间距nodeSize既可以是固定数字也可以是接收节点数据、返回尺寸的函数Size | ((nodeData) Size)nodeSpacing同样支持函数或数字两种形式用于在防重叠时额外拉开间隙两者共同参与防重叠算法中的碰撞检测与位置微调。preventOverlap 与 preventOverlapPadding防重叠官方文档明确必须配合nodeSize或节点数据中的size属性一起使用只有数据中存在data.size或布局中设置了nodeSize才能执行节点重叠的碰撞检测。防重叠开启后preventOverlapPadding默认 10控制节点之间的内边距大小。sortBy排序指定节点属性名作为排序依据数值越大越靠近网格中心若未定义则使用节点的**度degree即连接的边数**作为排序依据。仓库 utils 中的注释还提到一个兼容性细节Grid 布局会直接读取data[sortBy]因此需要避免在数据中使用data、style等容易与内部字段冲突的属性名packages/g6/src/utils/layout.ts#L287-L288。补充Grid 布局同其他布局一样继承了BaseLayoutOptions的通用能力例如nodeFilter过滤参与布局的节点、enableWorker是否在 Web Worker 中执行、animation布局动画等详见 packages/g6/src/layouts/types.ts#L42-L98。进阶用法一自定义网格与排序着色在官方文档的 Custom Configuration 示例中可以通过组合begin、cols、rows、width、height、condense、sortBy精细控制网格形态并配合节点palette做分组着色const graph new Graph({ layout: { type: grid, begin: [50, 50], // 从 [50, 50] 开始排布 cols: 4, // 4 列 rows: 6, // 6 行 width: 400, // 布局区域宽度 height: 600, // 布局区域高度 preventOverlap: true, // 防止节点重叠 nodeSize: 30, // 节点尺寸 condense: true, // 使用最小空间 sortBy: value, // 按 value 属性排序 }, data: { nodes: Array.from({ length: 24 }, (_, i) ({ id: node-${i}, data: { value: Math.random() * 100, // 排序依据属性 }, })), edges: Array.from({ length: 20 }, (_, i) ({ id: edge-${i}, source: node-${Math.floor(Math.random() * 24)}, target: node-${Math.floor(Math.random() * 24)}, })), }, node: { style: { size: 20, label: true, labelText: (datum) datum.id, labelBackground: true, }, palette: { type: group, field: (datum) datum.data.value, color: [#1783FF, #00C9C9, #F08F56, #D580FF], }, }, edge: { style: { stroke: #bfbfbf, }, }, });要点解析begin: [50, 50]让网格整体向右下偏移避免与画布边缘贴死sortBy: value使value更大的节点落在更靠近中心的单元格palette的field按data.value分组着色与排序协同形成中心高亮、外围渐变的视觉层次condense: true在 4×6 网格中会压缩空白使节点更紧凑。进阶用法二为特定节点指定行列位置当需要锁定某些关键节点到固定单元格例如四角、关键路径节点时使用position回调。它对返回{ row, col }的节点强制放置返回undefined的节点则继续走自动排布const graph new Graph({ layout: { type: grid, cols: 5, rows: 5, position: (node) { // 为特定节点指定位置 if (node.id node-0) return { row: 0, col: 0 }; // 左上角 if (node.id node-1) return { row: 0, col: 4 }; // 右上角 if (node.id node-2) return { row: 4, col: 0 }; // 左下角 if (node.id node-3) return { row: 4, col: 4 }; // 右下角 return undefined; // 其余节点自动排布 }, }, data: { nodes: Array.from({ length: 25 }, (_, i) ({ id: node-${i}, })), edges: Array.from({ length: 20 }, (_, i) ({ id: edge-${i}, source: node-${Math.floor(Math.random() * 25)}, target: node-${Math.floor(Math.random() * 25)}, })), }, node: { style: { size: 20, label: true, labelText: (datum) datum.id, labelBackground: true, }, }, edge: { style: { stroke: #bfbfbf, }, }, }); graph.render();注意事项row/col均从 0 开始计数已被position占用的单元格自动排布会跳过不会产生节点覆盖建议只在少量关键节点上使用全部节点手工指定会丧失 Grid 自动布局的意义。进阶用法三运行时动态更新布局参数Grid 布局并不是一次性的——你可以通过graph.setLayout()graph.layout()在运行时动态调整行列数、防重叠、排序等参数并重新布局。官方在线 Demo 的交互面板即采用此模式const options { type: grid, cols: 5, rows: 5, width: 400, height: 400, preventOverlap: true, nodeSize: 30, condense: false, }; // 修改任意参数后重新执行布局 optionFolder.onChange(({ property, value }) { graph.setLayout({ type: grid, [property]: value, }); graph.layout(); });从源码看setLayout更新的是图实例的布局配置layout()触发实际计算并调用model.updateData()把结果写回节点坐标packages/g6/src/runtime/layout.ts。这一能力让用户拖拽调节滑块、图实时重排成为可能非常适合配置面板、可视化编辑器类产品。仓库中的实证Demo 与单元测试仓库内置了 Grid 布局的完整示例与测试可直接作为参考或运行验证交互示例layout-grid.ts 使用cluster.json数据集演示了默认sortBy按度排序以及通过面板在id、degree、cluster三种排序策略间切换export const layoutGrid: TestCase async (context) { const graph new Graph({ ...context, data, node: { style: { labelText: (d) d.id } }, layout: { type: grid, sortBy: (d) d.data.cluster, }, behaviors: [zoom-canvas, drag-canvas, drag-element, click-select], }); await graph.render(); // ... };单元测试grid.spec.ts 覆盖了sortBy默认行为与sortBy: id两种场景的 SVG 快照断言describe(grid, () { it(sortBy default, async () { await expect(graph).toMatchSnapshot(__filename, sortby-default); }); it(sortBy id, async () { graph.setLayout({ type: grid, sortBy: id }); await graph.layout(); await expect(graph).toMatchSnapshot(__filename, sortby-id); }); });多布局流水线pipeline.spec.ts 中还验证了 Grid 可作为layout: [...]数组流水线中的一环说明它能与 dagre 等其他布局串联使用。真实用例官方示例站点的 Grid Layout 基础示例 提供了开箱即用的演示代码。常见问题与最佳实践Q1节点重叠了怎么办确保两件事同时满足布局中设置nodeSize或节点数据带size并开启preventOverlap: true。还可配合preventOverlapPadding增加间隙、nodeSpacing拉开间距。Q2行列数怎么选规则明确cols * rows 节点数即可铺满。若节点数动态变化建议只给cols或只给rows让算法自动推导另一维避免出现空行空列。Q3想让重点节点居中用sortBy指定数值型属性数值越大越靠中心无属性时默认按节点度排序即连接越多的节点越居中。Q4与力导向等布局混用Grid 是非迭代布局一次计算完成。在多布局流水线layout: [grid, force]中通常放在靠前阶段做初排后续布局再做精排。最佳实践小结纯表格陈列用condense: true压缩空间需要呼吸感用condense: false节点尺寸不统一时nodeSize传函数按节点返回尺寸防重叠更准确排序字段避免与内部保留字段data、style等重名交互式调参场景使用setLayout layout()组合实时反馈。总结Grid 布局是 G6 中秩序感最强的布局方案通过cols/rows控制网格密度begin/width/height控制铺陈区域preventOverlap/nodeSize/nodeSpacing保证不重叠sortBy实现数值中心化排序position实现定点放置再配合setLayout()动态重排可以胜任从静态矩阵表到交互式配置面板的各类规整排版需求。官方文档详见 GridLayout.en.md源码入口见 packages/g6/src/layouts/types.ts 与 packages/g6/src/registry/build-in.ts#L166。赞分享数据可视化前端图表库【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址https://gitcode.com/gh_mirrors/g6/G6点击查看免费下载相关推荐notebooklm-py 的事件循环亲和性契约NotebookLMClient 的 Loop-Affinity 设计与实现notebooklm py 的事件循环亲和性契约NotebookLMClient 的 Loop Affinity 设计与实现 导读 NotebookLMCli数据可视化前端图表库G6 径向布局Radial Layout完全指南从基础配置到动态调参实战G6 径向布局Radial Layout完全指南从基础配置到动态调参实战 导读 径向布局Radial Layout是 G6 中一类以 根节点为中心、按数据可视化前端图表库MaaAssistantArknights 开发指南从环境搭建、PR 流程到代码格式化规范MaaAssistantArknights 开发指南从环境搭建、PR 流程到代码格式化规范 本指南以《明日方舟》小助手 MAAMaaAssistantArk数据可视化前端图表库创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考