数据可视化前端图表库【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址https://gitcode.com/gh_mirrors/g6/G6点击查看免费下载本文围绕 G6antv/g6中所有内置布局共同支持的通用配置项展开系统讲解type、preLayout、nodeFilter、iterations、animation、width/height/center、node/edge字段映射等公共属性的作用、默认值与底层运行机制并深入布局运行时LayoutController与内置布局注册表帮助你写出可预测、可复用的布局配置。读完本文你将能够熟练配置任意内置布局理解前布局pre-layout与后布局post-layout的执行差异并掌握迭代布局force 系列的驱动方式。通用配置总览在 G6 中无论你使用哪一种内置布局layout配置对象都共享一组通用属性。这些属性由布局基类BaseLayout与其选项类型BaseLayoutOptions统一约束见 packages/g6/src/layouts/types.ts其中type是唯一必填项其余均为可选项。PropertyDescriptionTypeDefaultRequiredtype布局类型内置或自定义布局的名称Type-✓isLayoutInvisibleNodes不可见节点是否参与布局在 preLayout 为 true 时生效booleanfalsenodeFilter参与布局的节点(node: NodeData) boolean() truecomboFilter参与布局的 combo 元素(combo: ComboData) boolean() truepreLayout使用前布局在初始化元素前计算布局booleanfalseenableWorker是否在 WebWorker 中运行布局boolean-iterations迭代布局的迭代次数number-animation是否启用布局动画booleanfalsewidth布局区域宽度默认为当前容器宽度number-height布局区域高度默认为当前容器高度number-center布局中心点[number, number] | [number, number, number]-node节点字段映射用于将业务字段映射为布局字段(datum) ({ id?, x?, y?, z?, parentId?, isCombo? })-edge边字段映射用于将业务字段映射为布局字段(datum) ({ id?, source?, target? })-补充说明原文要点结合源码进一步展开width/height/center是由antv/layout统一支持的通用布局字段。在 G6 运行时中这些值并非直接取自你的配置当未显式配置时LayoutController.initGraphLayout会读取视口viewport的画布尺寸viewport.getCanvasSize()并以[width / 2, height / 2]作为默认中心点注入布局实例见 packages/g6/src/runtime/layout.ts。对于d3-force/d3-force-3d中心点还会被特殊处理为{ x, y, z: 0 }的对象形式。node/edge用于适配非标准业务字段如自定义的id/source/target字段名。在 G6 中即使不写这两个字段布局适配层也会注入一套默认映射node默认将节点样式中的x/y/z、所属 comboparentId与isCombo标记映射为布局字段edge默认映射id/source/target见 packages/g6/src/utils/layout.ts。iterations是 G6 运行时用于驱动迭代布局的步数与某些布局内部自身的算法参数不是同一个概念。在 graphLayout 实现中未配置时默认取300开启动画时以maxIteration: iterations逐帧回调onTick更新位置关闭动画时直接执行并layout.stop()后调用layout.tick(iterations)一次性拿到终态位置。Type布局类型的指定方式type指定布局类型值为内置布局类型的名称或自定义布局的名称。它直接决定了运行时从扩展注册表中取出哪个布局类const graph new Graph({ // Other configurations... layout: { type: antv-dagre, }, });在 packages/g6/src/registry/build-in.ts 中内置布局统一注册在layout分类下当前仓库内置的布局类型包括antv-dagre基于 dagre 的自定义布局 → AntvDagreLayout.en.mdcircular环形布局 → CircularLayout.en.mdcombo-combined适合组合combo场景的布局 → ComboCombinedLayout.en.mdconcentric同心圆布局 → ConcentricLayout.en.mdd3-force基于 D3 的力导向布局 → D3ForceLayout.en.mdd3-force-3d3D 力导向布局 → D3Force3DLayout.en.mddagreDagre 布局 → DagreLayout.en.mdfishbone鱼骨图布局 → Fishbone.en.mdforce力导向布局 → ForceLayout.en.mdforce-atlas2ForceAtlas2 布局 → ForceAtlas2Layout.en.mdfruchtermanFruchterman 布局 → FruchtermanLayout.en.mdgrid网格布局 → GridLayout.en.mdmds适用于高维数据的 MDS 布局 → MdsLayout.en.mdradial辐射布局 → RadialLayout.en.mdrandom随机布局 → RandomLayout.en.mdsnake蛇形布局 → Snake.en.mdcompact-box紧凑盒树布局 → CompactBoxLayout.en.mddendrogram树状图布局 → DendrogramLayout.en.mdmindmap思维导图布局 → MindmapLayout.en.mdindented缩进树布局 → IndentedLayout.en.md从源码结构看这些内置布局大致分为三类直接继承 G6BaseLayout的布局例如fishbonefishbone.ts与snakesnake.ts它们是 G6 原生实现的布局来自antv/layout的图布局如force、d3-force、circular、grid、radial、antv-dagre、dagre等运行时通过 layoutAdapter / legacyLayoutAdapter 统一适配为 G6 的BaseLayout接口来自antv/hierarchy的树布局如compact-box、dendrogram、mindmap、indented由 isTreeLayout 识别后走treeLayout执行路径见 packages/g6/src/runtime/layout.ts。若type传入未注册的名称initGraphLayout会调用print.warn输出 “The layout of ${type} is not registered.” 警告见 packages/g6/src/runtime/layout.ts。参与布局的元素筛选nodeFilter / comboFilternodeFilter与comboFilter决定哪些节点 / combo 参与布局默认均返回true全部参与。在 getLayoutData 中筛选逻辑与preLayout取值相关preLayout 为 true 时直接从数据模型model.getData()中取节点先判断style.visibility hidden的不可见节点是否排除受isLayoutInvisibleNodes控制再检查该节点的树/组合祖先中是否存在折叠collapsed节点最后应用你的nodeFilterpreLayout 为 false 时以「元素是否已渲染」为前提先通过element.getElementById判断节点元素是否存在且未被销毁isToBeDestroyed再应用你的nodeFilter。边则会进一步被裁剪只有当边的source与target都落在「参与布局的节点 combo」集合内时该边才会进入布局见 packages/g6/src/runtime/layout.ts。组合combo本身作为「类节点」与节点合并进同一个nodeLikeIdsMap从而让布局可以感知 combo 的层级关系。典型用法只让部分节点参与布局其余节点保持原位。const graph new Graph({ // Other configurations... layout: { type: force, nodeFilter: (node) node.data.layout ! fixed, // 业务字段筛选 }, });前布局与不可见节点preLayout / isLayoutInvisibleNodespreLayout默认false表示是否使用前布局——即在初始化元素之前先计算布局。适合一些需要提前确定节点位置的场景如首帧就要呈现完整布局的树图、需要精确缩放适配的场景。在运行时中preLayout由 isPreLayout 判定要求布局配置为非数组且preLayout: true并在首次绘制前通过LayoutController.preLayout执行之后的数据更新不会再触发见 packages/g6/src/runtime/layout.ts。执行过程中会依次派发BEFORE_LAYOUT/AFTER_LAYOUT生命周期事件并将模拟布局结果同步回数据模型model.syncNodeLikeDatum/model.syncEdgeDatum。isLayoutInvisibleNodes默认false仅在preLayout为 true 时生效置为true后隐藏节点style.visibility hidden以及位于折叠子树/折叠 combo 下的节点也会参与布局计算见 packages/g6/src/runtime/layout.ts。迭代驱动iterationsiterations用于控制迭代类布局force 系的迭代步数。G6 运行时通过antv/layout导出的isLayoutWithIterations判断当前布局是否可迭代并分两条路径处理见 packages/g6/src/runtime/layout.ts开启animationlayout.execute(data, { animate: true, maxIteration: iterations, onTick })每次迭代 tick 都调用updateElementPosition平滑更新元素位置形成布局动画关闭animation先layout.execute(data)再layout.stop()最后layout.tick(iterations)一次性返回迭代iterations步后的终态位置。需要注意iterations是运行时驱动的步数与某些布局内部的算法参数如力导向布局的alpha衰减策略不是同一概念对非迭代布局如grid、antv-dagre该配置不会生效。此外iterations在类型定义中归属于WebWorkerLayoutOptions见 packages/g6/src/layouts/types.ts与enableWorker同组暗示二者常配合使用于计算密集的迭代布局场景。布局动画与多布局流水线animationanimation默认false控制是否启用布局动画对于迭代布局动画表现为两次迭代之间的平滑过渡如上文onTick机制对于非迭代布局布局会一次性计算出结果随后通过updateElementPosition(layoutResult, animation)以动画形式从当前位置过渡到目标位置并await animationResult?.finished等待动画完成见 packages/g6/src/runtime/layout.ts对于树布局动画模式下会先把所有节点移动到根节点位置再统一过渡到布局结果形成展开动画见 packages/g6/src/runtime/layout.ts。此外layout配置支持传入数组以形成布局流水线postLayout会按顺序依次执行每个阶段BEFORE_STAGE_LAYOUT/AFTER_STAGE_LAYOUT每个阶段布局完成后若未开启动画则立即更新元素位置见 packages/g6/src/runtime/layout.ts。const graph new Graph({ // Other configurations... layout: [ { type: force, iterations: 500, animation: true }, { type: grid, cols: 6 }, ], });布局区域与中心width / height / centerwidth/height定义布局区域未配置时默认为画布尺寸运行时注入center定义布局中心点支持 2D[x, y]与 3D[x, y, z]供 3D 力导向布局使用。相关默认值的注入发生在 initGraphLayoutconst [width, height] viewport.getCanvasSize(); const center [width / 2, height / 2]; const config { nodeSize, width, height, center }; deepMix(layout.options, config, restOptions); // 用户配置会覆盖默认值同时该函数还会自动注入nodeSize优先取options.nodeSize否则按节点元素的实际size计算。这意味着大多数内置布局无需手动指定width/height/center即可填满画布这也是推荐做法——除非你需要将布局限制在画布的某个子区域。业务字段映射node / edgenode/edge用于把非标准的业务数据结构映射为布局所需的字段。适配层默认注入的映射packages/g6/src/utils/layout.ts如下// node 默认映射id / x / y / z / parentId / isCombo const defaultNode (datum) { const { style } datum; const parentId combo in datum ? (datum.combo ?? null) : null; return { id: idOf(datum), ...(isNumber(style?.x) ? { x: style.x } : {}), ...(isNumber(style?.y) ? { y: style.y } : {}), ...(isNumber(style?.z) ? { z: style.z } : {}), parentId, ...(isCombo(id) ? { isCombo: true } : {}), }; }; // edge 默认映射id / source / target const defaultEdge (datum) ({ id: idOf(datum), source: datum.source, target: datum.target });如果你的数据使用自定义字段名例如sourceId/targetId、posX/posY可以通过node/edge覆盖const graph new Graph({ // Other configurations... layout: { type: force, node: (datum) ({ id: datum.id, x: datum.data.posX, y: datum.data.posY }), edge: (datum) ({ id: datum.id, source: datum.data.sourceId, target: datum.data.targetId }), }, });深层原理布局适配与注册机制从源码看G6 的布局体系是一套「注册表 适配器」架构注册所有内置布局在 build-in.ts 中以layout分类注册运行时通过getExtension(layout, type)取出对应类判定initGraphLayout 判断取出的类——若其原型链上是 G6BaseLayout的直接子类则直接使用否则按isLegacyAntVLayout判断走旧版1.x适配器legacyLayoutAdapter或新版适配器layoutAdapterpackages/g6/src/utils/layout.ts执行stepLayout根据isTreeLayout分流到treeLayoutantv/hierarchy方法式布局或graphLayout类式布局见 packages/g6/src/runtime/layout.ts结果回写布局结果统一转换为{ nodes, edges, combos }的GraphData格式含style.x/y/z与边controlPoints再由updateElementPosition调用model.updateData与element.draw完成渲染更新。这套机制意味着你完全可以注册自定义布局实现或继承BaseLayout抽象类的execute方法见 base-layout.ts即可获得与内置布局一致的通用配置能力。实战示例fishbone 与 snake 布局的通用配置应用以 G6 原生实现的两种布局为例可以看到通用配置如何与布局特有参数协同fishbone鱼骨图在 layout-fishbone.ts 中通用参数与特有参数directionLR | RL默认RL、hGap/vGap、getRibSep、nodeSize组合使用const graph new Graph({ data: treeToGraphData(data), layout: { type: fishbone, vGap: 48, hGap: 48, direction: RL, }, behaviors: [drag-canvas, zoom-canvas, drag-element], });鱼骨图布局适合展示因果关系、层次结构或分类信息运行时取树的根节点为鱼头沿层次交替排列鱼刺见 fishbone.ts。snake蛇形在 layout-snake.ts 中节点按 S 型路径排布默认每行cols: 5、clockwise: true、padding: 0见 snake.ts适合在紧凑空间内展示长链结构如流程链路。其数据必须是从源节点到汇节点的线性路径——execute前会通过validate校验图连通性、源/汇节点唯一性及中间节点单前驱单后继不满足则原样返回数据见 snake.ts。两个示例都直接受width/height/center、nodeFilter、animation等通用配置的约束验证了 BaseLayout 通用配置对所有布局的一致行为。进一步阅读各内置布局的独立配置文档目录 packages/site/docs/manual/layout 下每个布局均有独立的.en.md/.zh.md说明布局类型定义与选项类型packages/g6/src/layouts/types.ts、packages/g6/src/spec/layout.ts布局运行时控制器packages/g6/src/runtime/layout.ts布局适配层与工具函数packages/g6/src/utils/layout.ts自定义布局注册方式packages/site/docs/manual/layout/custom-layout.en.md。赞分享数据可视化前端图表库【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址https://gitcode.com/gh_mirrors/g6/G6点击查看免费下载相关推荐G6 布局 API 完全指南setLayout / getLayout / layout / stopLayout 与布局配置实战G6 布局 API 完全指南setLayout / getLayout / layout / stopLayout 与布局配置实战 G6 antv/g6数据可视化前端图表库G6 图布局总览内置布局体系、注册配置与 Worker/WASM/GPU 加速实战G6 图布局总览内置布局体系、注册配置与 Worker/WASM/GPU 加速实战 导读 本文以 AntV G6JavaScript 图可视化框架的布局模数据可视化前端图表库深入 G6 自定义布局从 BaseLayout 到注册与配置的完整实战指南深入 G6 自定义布局从 BaseLayout 到注册与配置的完整实战指南 在 AntV G6 packages/g6 https://link.gitco数据可视化前端图表库创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考