G6 网格布局GridLayout完全指南配置参数、源码原理与实践案例【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址: https://gitcode.com/gh_mirrors/g6/G6网格布局Grid是 G6 中将节点按行列整齐排列的经典布局方案特别适合需要以矩阵、表格形态展示数据关系的场景。本文以packages/site/docs/manual/layout/GridLayout.zh.md为骨架结合 G6 源码中布局注册、参数透传与数据适配的实现细节系统讲解 grid 布局的完整配置项、防重叠机制、排序逻辑与位置指定技巧帮助你快速落地整齐、可控的网格化图编排。概述与适用场景网格布局将节点按照网格形式排列适用于需要整齐排列节点的场景。该布局支持两种行列确定方式自动计算根据节点数量、布局空间推算行列数与手动指定直接设置cols/rows并内置了防止节点重叠的碰撞检测能力。从源码看G6 将grid布局作为内置布局直接注册进构建期扩展库registry/build-in.ts 中的grid: GridLayout即指向从antv/layout导出的GridLayout见 layouts/index.ts类型上由GridLayoutOptions与BaseLayoutOptions合并而成见 layouts/types.ts因此它天然支持animation、enableWorker、nodeFilter等通用布局能力。典型应用场景在数据可视化中需要展示矩阵或表格形式的数据关系需要对一组同构节点做等距、对齐的规整排布如网格状面板、宫格卡片需要按某个字段如度数、聚类簇、自定义权重将节点由中心向外有序放置。快速上手基础用法最简单的配置方式只需指定布局类型与行列数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();注意在 G6 中使用当前容器的宽度/高度作为 grid 布局width/height的默认值单独使用此布局时默认值为300。配置方式在实例化Graph时通过layout字段传入配置对象即可const graph new Graph({ layout: { type: grid, begin: [0, 0], cols: 5, rows: 5, width: 300, height: 300, preventOverlap: true, nodeSize: 30, condense: false, }, });其中type: grid是必选项用于在布局注册表中定位到内置的GridLayout实现。layout支持传入单个配置对象也支持传入配置数组组成布局流水线见 runtime/layout.ts 中postLayout对 pipeline 的循环处理多个布局可依次作用于节点。配置项详解原文档给出的完整配置项如下属性描述类型默认值必选type布局类型grid-✓begin网格开始位置左上角默认为[0, 0][number, number][0, 0]cols网格的列数为 undefined 时算法根据节点数量、布局空间、rows若指定自动计算numberundefinedrows网格的行数为 undefined 时算法根据节点数量、布局空间、cols若指定自动计算number10width布局区域宽度在 G6 中使用当前容器的宽度作为默认值number300height布局区域高度在 G6 中使用当前容器的高度作为默认值number300condense为 false 时表示利用所有可用画布空间为 true 时表示利用最小的画布空间booleanfalsenodeSize节点大小直径用于防止节点重叠时的碰撞检测Size | ((nodeData: Node) Size)-nodeSpacing节点间距用于调整节点之间的间隔((node?: Node) number) | number-position指定每个节点所在的行和列(node?: Node) { row?: number; col?: number; }undefinedpreventOverlap是否防止节点重叠需要配合 nodeSize 或节点数据中的 size 属性使用booleanfalsepreventOverlapPadding避免重叠时节点的间距 paddingpreventOverlap 为 true 时生效number10sortBy指定排序的依据节点属性名数值越高则该节点被放置得越中心。若为 undefined则会计算节点的度数度数越高节点将被放置得越中心stringundefined下面逐项展开关键配置的行为与细节。begin网格起点begin决定网格左上角第一个节点的坐标默认[0, 0]。当你不希望节点从画布原点开始排布时例如为顶部标题、侧边面板预留空间可设置为begin: [50, 50]。cols / rows行列控制cols未指定时算法会根据节点数量、布局空间width/height以及rows若指定自动计算列数rows未指定时算法会根据节点数量、布局空间以及cols若指定自动计算行数两者同时指定时网格严格按给定行列排布多余节点会溢出到新行或新列。width / height布局区域限制网格整体占据的空间范围。默认值取决于运行环境在 G6 中取当前容器尺寸脱离容器单独使用布局库时默认300。condense压缩网格空间condense: false默认利用所有可用画布空间节点会被均匀铺满整个width×height区域condense: true只利用最小画布空间网格按照节点实际数量紧凑排布不刻意撑满布局区域。nodeSize / nodeSpacing节点尺寸与间距nodeSize表示节点直径用于防重叠时的碰撞检测支持固定数值或按节点数据动态返回的函数形式(nodeData) SizenodeSpacing用于调整节点之间的间隔支持数值或函数(node) number。preventOverlap防重叠开关boolean 默认值false是否防止节点重叠。必须配合nodeSize或节点数据中的size属性使用只有两种途径之一在数据中设置了data.size或在布局中配置了与当前图节点大小相同的nodeSize值才能进行节点重叠的碰撞检测。preventOverlapPadding防重叠间距number 默认值10避免重叠时节点的间距 padding仅在preventOverlap: true时生效。数值越大相邻节点在防重叠计算后留出的空隙越大。sortBy中心化排序string 默认值undefined指定排序依据的节点属性名数值越高则该节点被放置得越中心。若为undefined布局会计算节点的度数度数越高节点将被放置得越中心。从源码角度G6 在将图数据适配给底层antv/layout时对sortBy做了专门兼容网格布局会直接读取节点data[sortBy]字段因此适配层会把节点的data、style等字段扁平展开进布局模型见 utils/layout.ts 中的注释与实现。这意味着sortBy: id时按节点 id 排布sortBy: value时按自定义数据字段排序value大的节点更靠近中心也可以传入比较函数见下文 demo 中的(n1, n2) Number(n2.data.cluster) - Number(n1.data.cluster)实现任意自定义排序规则。position手动指定行列(node?: Node) { row?: number; col?: number; }默认值undefined允许为特定节点精确指定其所在行和列。返回undefined的节点则继续走自动布局逻辑。该能力非常适合锚定关键节点的需求——例如把入口节点固定在左上角、把出口节点固定在右下角其余节点自动填充。进阶示例自定义配置通过组合上述配置项可以实现更精细的网格排布如从[50, 50]起点开始、4 列 6 行、防重叠、紧凑布局、按value中心化排序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)}, })), }, });带渲染的可运行版本含按value分组配色的节点样式import { Graph } from antv/g6; const graph new Graph({ container: container, width: 600, height: 400, layout: { type: grid, begin: [50, 50], cols: 4, rows: 6, width: 400, height: 600, preventOverlap: true, nodeSize: 30, condense: true, sortBy: 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, }, }, }); graph.render();进阶示例指定节点位置通过position属性为特定节点指定行列其余节点自动布局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)}, })), }, });可运行版本import { Graph } from antv/g6; const graph new Graph({ container: container, width: 600, height: 400, 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();交互式调参setLayout 动态更新网格布局支持运行时动态调整参数。原文档的在线体验示例展示了借助 GUI 面板实时调节cols、rows、width、height、preventOverlap、nodeSize、condense的交互方式其核心是graph.setLayout与graph.layout()的组合const options { type: grid, cols: 5, rows: 5, width: 400, height: 400, preventOverlap: true, nodeSize: 30, condense: false, }; // GUI 面板中任一参数变化时 optionFolder.onChange(({ property, value }) { graph.setLayout({ type: grid, [property]: value, }); graph.layout(); });配合一个 25 节点、20 条随机边的图数据节点带value分组配色即可实时观察不同参数对网格排布的影响。站点侧的真实示例可参考 layout/grid/demo/basic.js其中通过下拉框在sortBy: id与sortBy: cluster之间切换并调用setLayout重排。源码原理grid 布局在 G6 中的工作链路1. 注册与解析grid布局在 registry/build-in.ts 中注册为内置布局对应的实现类是antv/layout导出的GridLayout见 layouts/index.ts。G6 的布局控制器LayoutController在postLayout中遍历布局流水线逐个执行stepLayout并触发BEFORE_LAYOUT/AFTER_LAYOUT生命周期事件见 runtime/layout.ts。2. 数据适配sortBy 的兼容处理G6 会把图数据转换为底层布局库所需的模型。针对 grid 布局直接读取data[sortBy]的特性utils/layout.ts 在graphData2LayoutModel中将节点的data、style等字段展开合并进data对象同时注释特别提醒适配层会避免用户数据中使用data、style等保留字段。此外节点已有的style.x/style.y也会被同步到布局模型的data.x/data.y中供需要读取初始位置的布局使用。3. 测试与性能验证单元测试unit/layouts/grid.spec.ts 覆盖了sortBy默认行为与sortBy: id两种场景的 SVG 快照断言并在测试中通过graph.setLayout({ type: grid, sortBy: id })graph.layout()验证动态重排功能 demodemos/layout-grid.ts 展示了sortBy支持字符串id、degree与函数按cluster倒序两种形式性能基线perf/draw.perf.ts 以layout: { type: grid }作为基准之一对 100 到 10000 节点的绘制与布局耗时进行评测可作为网格布局在大规模节点下的性能参考。相关资源布局配置规范spec/layout.ts布局类型定义与选项layouts/types.ts布局运行控制器runtime/layout.ts网格布局实际案例layout/grid/demo/basic.js掌握cols/rows自动与手动控制、preventOverlap防重叠、sortBy中心化排序以及position定点锚定这四个核心能力你就能在 G6 中快速构建出整齐、可控、可交互的网格化图布局。【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址: https://gitcode.com/gh_mirrors/g6/G6创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考