G6 内置扩展全景指南：从动画、交互到布局与插件的注册与配置

数据可视化前端图表库【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址https://gitcode.com/gh_mirrors/g6/G6点击查看免费下载G6 是一个基于 JavaScript 的图可视化框架其强大之处在于高度模块化的扩展Extension体系动画、交互行为、节点/边/组合元素、布局算法、色板、主题、插件、数据转换乃至底层图形形状全部以统一的注册机制提供给使用者。本文以 内置扩展文档 为主体结合仓库源码深入讲解 G6 内置扩展的完整清单、注册类型与配置方式帮助你在实际项目中快速选中合适的扩展并正确挂载同时理解其底层注册原理以便按需自定义注册自己的扩展。一、扩展体系总览一切皆可注册从源码看G6 将扩展按类别Category统一管理。打开 内置扩展注册文件 可以看到注册表以对象形式按类别组织const BUILT_IN_EXTENSIONS: ExtensionRegistry { animation: { combo-collapse: ComboCollapse, ... }, behavior: { brush-select: BrushSelect, ... }, combo: { circle: CircleCombo, rect: RectCombo }, edge: { cubic: Cubic, line: Line, ... }, layout: { antv-dagre: AntVDagreLayout, ... }, node: { circle: Circle, diamond: Diamond, ... }, palette: { spectral, tableau, oranges, greens, blues }, theme: { dark, light }, plugin: { bubble-sets: BubbleSets, ... }, transform: { arrange-draw-order: ArrangeDrawOrder, ... }, shape: { circle: GCircle, ... }, };这些扩展会在项目导入时通过 preset.ts 中的registerBuiltInExtensions()自动注册无需用户手动操作。注册的核心逻辑位于 register.tsexport function registerT extends ExtensionCategory(category: LoosenT, type: string, Ctor: ExtensionRegistry[T][string]) { const ext EXTENSION_REGISTRY[category][type]; if (ext) print.warn(The extension ${type} of ${category} has been registered before, and will be overridden.); Object.assign(EXTENSION_REGISTRY[category]!, { [type]: Ctor }); }注册后扩展被存放在 store.ts 的EXTENSION_REGISTRY中使用时通过 get.ts 中的getExtension(category, type)按类别与类型取出构造器并实例化。也就是说注册类型type 字符串就是你在配置项中书写的那把钥匙而实际执行的类由注册表映射而来。补充说明文档表格与内置注册表并非完全一一对应。例如 build-in.ts 中还额外内置了fishbone、snake布局、auto-adapt-label行为、edge-bundling、title插件以及arrange-draw-order、collapse-expand-combo、map-node-size、update-related-edges等数据转换注册表比文档表格更完整需要时可查阅源码确认最新清单。二、动画扩展Animation动画扩展用于元素的进场、更新、退场等阶段属于注册在元素配置上的扩展。扩展注册类型描述ComboCollapsecombo-collapse组合收起ComboExpandcombo-expand组合展开NodeCollapsenode-collapse节点收起NodeExpandnode-expand节点展开PathInpath-in路径进入PathOutpath-out路径退出Fadefade渐变Translatetranslate平移配置方式在GraphOptions.[node|edge|combo].animation.[stage]中使用其中stage对应元素生命周期阶段如update、enter、exit。示例const graph new Graph({ // ... 其他配置 node: { animation: { update: translate, // 更新阶段仅使用平移动画 }, }, });从源码看动画扩展注册在animation类别下其类型为STDAnimation见 registry/types.ts即一份动画规格描述对象而非类实例。展开/收起类动画combo-collapse、node-collapse 等常与collapse-expand行为配合使用可参考仓库 行为/元素演示用例 了解实际组合效果。三、交互行为扩展Behavior交互行为是 G6 中最常用的一类扩展负责监听画布与元素事件并驱动状态变化。扩展注册类型描述BrushSelectbrush-select框选ClickSelectclick-select点击选中CollapseExpandcollapse-expand展开/收起元素CreateEdgecreate-edge创建边DragCanvasdrag-canvas拖拽画布DragElementForcedrag-element-force力导向拖拽元素DragElementdrag-element拖拽元素FixElementSizefix-element-size缩放画布时固定元素大小FocusElementfocus-element聚焦元素HoverActivatehover-activate悬停激活LassoSelectlasso-select套索选择OptimizeViewportTransformoptimize-viewport-transform操作画布时隐藏元素ScrollCanvasscroll-canvas滚动画布ZoomCanvaszoom-canvas缩放画布配置方式在GraphOptions.behaviors中配置支持字符串简写与对象形式const graph new Graph({ // ... 其他配置 behaviors: [drag-canvas, zoom-canvas, drag-element], });behaviors数组中的每一项可以是字符串、带参数的配置对象甚至是返回配置的函数。这些配置会先经 parseExtensions 归一化为标准格式自动生成key形如behavior-drag-canvas-0再由 ExtensionController 的setExtensions通过 diff 对比进入/更新/退出/保留的扩展并分别实例化或销毁。例如需要给行为传参时可写为behaviors: [ drag-canvas, { type: zoom-canvas, sensitivity: 2 }, { type: click-select, multiple: true }, ],行为扩展的实现类分布在 src/behaviors 目录下每个文件对应一个行为仓库的 行为测试用例 与 行为演示 提供了丰富的参考样例。四、元素扩展Element元素扩展包含节点、边、组合三大类决定数据如何被绘制成图上的视觉实体。4.1 节点Node扩展注册类型描述circleCircle圆形节点diamondDiamond菱形节点ellipseEllipse椭圆节点hexagonHexagon六边形节点htmlHTMLHTML 节点imageImage图片节点rectRect矩形节点starStar星形节点donutDonut甜甜圈节点triangleTriangle三角形节点配置方式有两种在GraphOptions.data.nodes[number].type中配置单条数据指定类型在GraphOptions.node.type中配置全局默认类型未指定时兜底。const graph new Graph({ // ... 其他配置 data: { nodes: [{ id: node-1, type: circle }], }, node: { type: circle, }, });节点实现位于 src/elements/nodes 目录如circle.ts、rect.ts、html.ts等演示用例可参考 元素节点演示。4.2 边Edge扩展注册类型描述Cubiccubic三次贝塞尔曲线Lineline直线Polylinepolyline折线Quadraticquadratic二次贝塞尔曲线CubicHorizontalcubic-horizontal水平三次贝塞尔曲线CubicVerticalcubic-vertical垂直三次贝塞尔曲线CubicRadialcubic-radial径向三次贝塞尔曲线配置方式同节点在GraphOptions.data.edges[number].type中配置在GraphOptions.edge.type中配置。边实现位于 src/elements/edges 目录不同曲线类型对应的 demo 可参考 cubic、polyline、quadratic 等演示文件。4.3 组合Combo扩展注册类型描述CircleCombocircle圆形组合RectComborect矩形组合配置方式同节点在GraphOptions.data.combos[number].type中配置在GraphOptions.combo.type中配置。组合实现位于 src/elements/combos 目录使用示例可参考 element-combo 演示 与 组合拖拽测试。五、布局扩展Layout布局算法负责为图数据计算节点坐标是决定图长相的关键一环。扩展注册类型描述AntVDagreLayoutantv-dagreAntV Dagre 布局ComboCombinedLayoutcombo-combined组合布局CompactBoxLayoutcompact-box紧凑树ForceAtlas2Layoutforce-atlas2ForceAtlas2 力导向布局CircularLayoutcircular环形布局ConcentricLayoutconcentric同心圆布局D3ForceLayoutd3-forceD3 力导向布局DagreLayoutdagreDagre 布局DendrogramLayoutdendrogram生态树ForceLayoutforce力导向布局FruchtermanLayoutfruchtermanFruchterman 力导向布局GridLayoutgrid网格布局IndentedLayoutindented缩进树MDSLayoutmds高维数据降维布局MindmapLayoutmindmap脑图树RadialLayoutradial径向布局RandomLayoutrandom随机布局配置方式在GraphOptions.layout中配置同样支持字符串与对象两种形式const graph new Graph({ // ... 其他配置 layout: { type: force, }, });带参数时直接扩展对象layout: { type: force, preventOverlap: true, linkDistance: 80, }布局实现位于 src/layouts 目录G6 内置布局之外的d3-force等依赖外部库实现。注意force、fruchterman等布局还有 GPU/WASM 变体演示如 layout-fruchterman-gpu.ts、layout-forceatlas2-wasm.ts供性能敏感场景参考。六、色板扩展Palette色板用于为元素自动分配颜色内置色板取自 palettes 文档片段spectral暖到冷渐变的连续光谱色深红 → 橙 → 黄 → 浅绿 → 蓝 → 紫tableauTableau 经典分类色蓝、橙、红、青、绿、黄、紫、粉、棕、灰 10 色oranges橙色单色渐变浅橙 → 深橙共 9 级greens绿色单色渐变浅绿 → 深绿共 9 级blues蓝色单色渐变浅蓝 → 深蓝共 9 级。配置方式在GraphOptions.[node|edge|combo].palette中配置示例const graph new Graph({ // ... 其他配置 node: { palette: tableau, }, });色板定义位于 src/palettes 目录类型见 types.ts。当节点数据未显式指定颜色时G6 会按数据顺序从色板中依次取色。七、主题扩展Theme主题用于统一定义画布、节点、边、文字等全局视觉样式。注册类型描述dark深色主题light浅色主题配置方式在GraphOptions.theme中配置示例const graph new Graph({ // ... 其他配置 theme: dark, });主题实现位于 src/themes 目录base.ts、dark.ts、light.ts。与行为、插件不同theme与palette在注册表中保存的是配置对象而非类见 registry/types.ts 中theme类型为Theme、palette类型为STDPalette这也是它们配置方式更声明式的原因。八、插件扩展Plugin插件用于为图挂载辅助能力如小地图、工具栏、提示框等。扩展注册类型描述BubbleSetsbubble-sets气泡集EdgeFilterLensedge-filter-lens边过滤镜GridLinegrid-line网格线Backgroundbackground背景Contextmenucontextmenu上下文菜单Fisheyefisheye鱼眼放大镜Fullscreenfullscreen全屏展示Historyhistory历史记录Hullhull轮廓包围Legendlegend图例Minimapminimap小地图Snaplinesnapline对齐线Timebartimebar时间条Toolbartoolbar工具栏Tooltiptooltip提示框Watermarkwatermark水印配置方式在GraphOptions.plugins中配置示例const graph new Graph({ // ... 其他配置 plugins: [minimap, contextmenu], });插件同样支持对象配置以传入参数plugins: [ minimap, { type: tooltip, getContent: (datum) 节点 ${datum.id} }, ],插件实现位于 src/plugins 目录每个插件一个子目录如minimap/、contextmenu/、tooltip/。插件相关的单测位于 插件测试目录可直接查看各插件的初始化参数与行为约定。九、数据转换扩展Transform数据转换Transform在数据进入布局与渲染之前对图数据做预处理用于解决平行边、标签重叠等数据层面的问题。扩展注册类型描述ProcessParallelEdgesprocess-parallel-edges平行边PlaceRadialLabelsplace-radial-labels径向标签配置方式在GraphOptions.transforms中配置示例const graph new Graph({ // ... 其他配置 transform: [process-parallel-edges, place-radial-labels], });注意配置项名为transforms原文档示例中写为单数transform实际生效的是复数形式transforms可在 运行时 transform 配置 与 spec/transform.ts 中确认。数据转换实现位于 src/transforms 目录例如 process-parallel-edges.ts 会将同一起止点的多条边错开排布避免重叠place-radial-labels.ts 负责为径向布局的节点标签避让。对应演示见 transform-process-parallel-edges.ts 与 transform-place-radial-labels.ts。十、图形扩展Shape图形Shape是最底层的绘制单元用于自定义元素时拼装视觉结构。注册类型描述circle圆形ellipse椭圆group分组htmlHTMLimage图片line直线path路径polygon多边形polyline折线rect矩形text文本label标签badge徽标使用方式自定义元素时在元素类成员方法 upsert 的第二个参数传入图形注册类型。例如this.upsert(shape-key, text, { text: label, fontSize: 16 }, this);upsert是 BaseElement 提供的核心方法若同名图形已存在则更新其样式否则创建新图形从而实现图形的高效复用与局部更新。自定义节点的完整教程见 自定义节点文档。在 build-in.ts 中可以看到shape类别下除label、badge外多数图形直接来自antv/g的基础图形circle、rect、line、path、polygon、polyline、ellipse、group、html、image、textlabel与badge则是 G6 在 elements/shapes 中封装的复合图形。十一、注册你自己的扩展内置扩展之外的扩展如自定义节点、自定义行为、自定义布局、第三方插件需要手动注册且只需注册一次即可全局使用。注册 API 的签名与内置注册表完全一致import { register, BaseNode } from antv/g6; class CircleNode extends BaseNode {} register(node, circle-node, CircleNode); // 注册后即可在配置中使用 const graph new Graph({ node: { type: circle-node }, });register的可选类别与 ExtensionRegistry 保持一致node、edge、combo、theme、palette、layout、behavior、plugin、animation、transform、shape。若重复注册同名扩展register.ts 会打印警告并覆盖旧实现。所有扩展的实例生命周期创建、更新、销毁统一由 ExtensionController 管理因此自定义扩展只需继承对应基类并实现约定方法即可无缝接入 G6 的渲染与更新流程。总结G6 的内置扩展覆盖了动画、交互、元素、布局、色板、主题、插件、数据转换与底层图形九大类别统一以注册类型字符串暴露给用户。掌握各扩展的注册类型与配置入口animation、behaviors、node/edge/combo、layout、palette、theme、plugins、transforms再结合 build-in.ts 这份官方清单和 register 的注册机制你既能快速搭建出满足业务需求的图应用也能在此基础上扩展出自己的自定义能力。赞分享数据可视化前端图表库【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址https://gitcode.com/gh_mirrors/g6/G6点击查看免费下载相关推荐G6 滚动画布交互 ScrollCanvas 完全指南配置、原理与实战G6 滚动画布交互 ScrollCanvas 完全指南配置、原理与实战 本篇技术指南聚焦 G6A Graph Visualization Framework数据可视化前端图表库G6 插件机制完全指南从内置插件到自定义扩展G6 插件机制完全指南从内置插件到自定义扩展 导读 插件Plugin是 G6 图可视化框架中最灵活的扩展机制它让开发者可以在不侵入图渲染主流程的前提下数据可视化前端图表库在 G6 中为图配置布局从 d3-force 入门到内置布局类型全景在 G6 中为图配置布局从 d3 force 入门到内置布局类型全景 这篇技术指南以 G6 官方 Getting Started 系列中的布局章节 step数据可视化前端图表库创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考