G6 元素体系总览节点、边、组合的构成原理与配置实战【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址: https://gitcode.com/gh_mirrors/g6/G6本文基于 G6 官方文档 元素总览 展开系统梳理 G6 图表中节点(Node)、边(Edge)、组合(Combo) 三大基本元素的类型体系、构成原理、状态机制与三种配置方式并结合packages/g6源码剖析其底层实现。读完本文你将能够掌握 G6 5.x 扁平化元素配置结构理解 Shape 组合原理熟练运用静态配置、实例配置与数据内配置三种途径并借助状态系统与扩展能力构建复杂业务图表。元素体系三类基本元素G6 图表的核心由三种基本元素构成节点(Node)、边(Edge)和组合(Combo)。它们是构建复杂图形网络的基础单元。从源码看三者均为元素类体系Element的实现统一继承自BaseElement见 base-element.ts而BaseElement又继承自图形基类BaseShape见 base-shape.ts因此节点、边、组合本质上都是由多个基础图形组合而成的复合元素。节点 (Node)节点表示图中的实体或概念如人物、地点、对象等。G6 提供了丰富的内置节点类型源码中位于 nodes 目录节点类型说明源码文件circle圆形基础圆形节点默认size: 32circle.tsrect矩形矩形节点rect.tsellipse椭圆椭圆节点ellipse.tsdiamond菱形菱形节点diamond.tstriangle三角形三角形节点triangle.tsstar星形星形节点star.tshexagon六边形六边形节点hexagon.tsdonut环形环形占比图节点donut.tsimage图片图片节点image.tshtmlHTMLHTML/DOM 节点html.ts所有内置节点均在 nodes/index.ts 中统一导出。除内置类型外G6 还支持 使用 React 定义节点 或 自定义节点 以满足特定需求。以圆形节点为例其关键实现是在drawKeyShape中通过upsert(key, GCircle, ...)创建圆形图形并将r取为size各维度最小值的一半见 circle.ts。upsert是BaseShape提供的创建、更新或删除图形的统一入口当传入的 style 为false时删除图形否则按需创建或更新见 base-shape.ts。边 (Edge)边表示节点间的连接关系如朋友关系、交易往来等。G6 内置多种边类型源码位于 edges 目录边类型说明源码文件line直线直线边line.tspolyline折线折线边可配置拐点polyline.tsquadratic二次贝塞尔二次贝塞尔曲线边quadratic.tscubic三次贝塞尔三次贝塞尔曲线边cubic.tscubic-horizontal水平方向三次贝塞尔cubic-horizontal.tscubic-vertical垂直方向三次贝塞尔cubic-vertical.tscubic-radial径向三次贝塞尔cubic-radial.ts边是路径(Path) 箭头(marker) 文本标签(label) 光晕(halo) 徽标(badge)的复合体。从 base-edge.ts 的render方法可见其渲染顺序先绘制 key 路径再绘制起始/结束箭头然后绘制标签、光晕和徽标。边还支持自环loop配置——当sourceNode与targetNode相同时会自动切换为自环路径getLoopPath支持arc与 cubic 两种形态见 base-edge.ts。当内置边不满足需求时可以通过 自定义边 实现复杂的连接表现。组合 (Combo)组合是一种特殊元素可以包含节点和其他组合用于表示集合、分组或层级关系。G6 内置两种组合类型源码位于 combos 目录圆形组合(circle)适合紧凑型分组circle.ts矩形组合(rect)适合规则布局的分组rect.ts组合支持嵌套、拖拽、展开/收起等交互。从 base-combo.ts 可以看到BaseCombo直接继承自BaseNode因此组合天然具备节点的全部能力标签、图标、徽标、连接桩等并额外扩展了组合特有能力size/collapsedSize展开/收起时的尺寸padding内边距仅展开状态生效collapsedMarker收起时的标记collapsedMarkerType支持child-count子元素数、descendant-count后代总数、node-count后代节点数或自定义函数见 base-combo.ts展开时组合尺寸由子元素包围盒自动计算收起时按collapsedSize渲染位置取后代节点的平均中心见 base-combo.ts可以通过 自定义组合 实现更复杂的容器行为。元素构成原理Shape 最小图形单元每个元素由一个或多个基础图形(Shape)组成。图形是 G6 中的最小图形单元包括矩形、圆形、文本、路径等。这些基础图形组件集中在 shapes 目录包括BaseShape所有图形与元素的基类提供upsert、animate、getShape等核心能力base-shape.tsLabel文本标签图形label.tsIcon图标图形icon.tsBadge徽标图形badge.tsContour轮廓图形contour.tsImage图片图形image.ts各 Shape 样式属性参考 Shape 样式属性。典型组合示例一个节点可能由背景图形如圆形 文本标签 图标 徽标 连接桩组成。从 base-node.ts 的render方法可见完整渲染顺序keyShape → halo(光晕) → icon(图标) → badges(徽标) → label(标签) → ports(连接桩)一条边可能由路径、箭头start/end 两个方向和文本标签组成一个组合可能由容器图形、标题文本和展开/收起按钮collapsed marker组成值得一提的是BaseShape.upsert实现了图形实例的增量复用同名图形存在则更新属性不存在则创建传入false则销毁这套机制让元素在数据更新时无需重建整个 DOM 树是 G6 高性能渲染的基石之一见 base-shape.ts。元素状态交互与业务的视觉开关元素状态是一种强大的机制用于展示元素在不同交互或业务场景下的视觉变化。G6 提供了一套完整的状态管理系统预设状态selected(选中)、highlight(高亮)、active(激活)、inactive(未激活)、disabled(禁用) 等状态叠加元素可同时拥有多个状态样式按优先级叠加合并自定义状态可根据业务需求定义任意状态State类型即string见 state.ts状态的底层计算机制状态样式的核心计算逻辑位于 runtime/element.tscomputeElementStatesStyle将元素当前的多个状态样式按Object.assign顺序合并后声明的状态覆盖先声明的同名属性见 element.tsgetElementComputedStyle定义了最终样式的优先级从低到高主题样式 → 色板样式 → 数据样式 → 元素默认样式 → 主题状态样式 → 元素状态样式见 element.ts状态声明支持回调函数写法可根据数据动态返回样式computeElementCallbackStyle操作状态的 APIgraph.setElementState(id, state, animation?)为单个元素设置状态graph.setElementState({ id: state }, animation?)批量设置见 graph.tsgraph.getElementState(id)获取元素当前状态数组内置行为如 click-select.ts、brush-select.ts、hover-activate.ts正是通过setElementState驱动状态切换的。主题中预设的状态样式G6 内置主题base.ts为三类元素分别定义了state配置。以节点为例selected状态默认开启 halo光晕haloStrokeOpacity: 0.25并加粗描边active状态开启淡光晕highlight状态加粗描边inactive/disabled状态则降低透明度与填充见 base.ts。边与组合也各有对应的状态定义见 base.ts。配置元素扁平化配置结构与三种方式G6 5.x 采用扁平化的配置结构所有元素的配置都在同一层级便于查找和管理。以文档中的完整示例为例{ node: { // 节点默认样式 style: { fill: orange, labelText: node, }, // 节点在不同状态下的样式 state: { selected: { stroke: #1890FF, lineWidth: 2, } } }, edge: { // 边默认样式 style: { stroke: #aaa, }, // 边在不同状态下的样式 state: { highlight: { stroke: red, } } }, combo: { // 组合默认样式 style: { fill: lightblue, stroke: blue, } } };这份配置既可以作为new Graph({ node, edge, combo })的全局配置传入也可以与数据结合使用。从 spec/element/node.ts 的类型定义可见style与state均支持静态对象、函数以及逐属性函数三种形态例如new Graph({ node: { type: circle, style: { fill: (d) d.color, // 逐属性回调根据数据动态着色 size: 32, }, state: { selected: { lineWidth: 2, stroke: #1890FF }, }, }, });三种配置方式按优先级从高到低配置方式有三种优先级从高到低使用实例方法动态配置如graph.setNode()、graph.setEdge()、graph.setCombo()见 graph.ts。这些方法将配置写入graph.options并触发model.refreshData()刷新数据映射适用于运行时切换样式方案实例化图时全局配置在new Graph()时指定配置项作为所有元素的默认映射在数据中配置在节点、边、组合的数据对象中设置如{ id: node-1, style: { fill: red } }用于对单个元素做个性化覆盖在 VSCode 等编辑器中由于全部类型定义完备你可以看到元素的全部可配置属性并基于关键字进行搜索大幅降低记忆负担。扩展能力G6 提供了强大的扩展能力满足各种自定义需求自定义节点自定义节点指南自定义边自定义边指南自定义组合自定义组合指南React 节点使用 React 定义节点Vue 节点使用 Vue 定义节点3D 扩展通过antv/g6-extension-3d使用 3D 节点源码见 g6-extension-3d内置cube、sphere、capsule、cylinder、cone、torus、plane等 3D 图元自定义扩展的实现要点自定义元素的核心是继承对应基类BaseNode/BaseEdge/BaseCombo并实现drawKeyShape抽象方法。例如自定义圆形节点时只需关注主图形key shape的绘制其余标签、图标、光晕、徽标、连接桩等均由基类统一处理见 base-node.ts 的注释说明。BaseCombo同理自定义组合时推荐使用这个类作为基类只需要专注于实现 keyShape 的绘制逻辑见 base-combo.ts。完成自定义类后通过graph.registerNode()/registerEdge()/registerCombo()注册到 G6 的扩展注册表registry/register.ts即可在配置中按名称使用。内置元素参考节点类型内置节点库BaseNode 通用配置见 BaseNode边类型内置边库BaseEdge 通用配置见 BaseEdge组合类型内置组合库BaseCombo 通用配置见 BaseCombo小结G6 的元素体系可以概括为一条主线节点、边、组合三类复合元素 → 由若干基础 Shape 图形组成 → 通过扁平化的 style/state 配置驱动视觉 → 通过三种配置方式与状态系统响应业务与交互 → 通过自定义扩展覆盖任意场景。理解这一体系后无论是开箱即用的内置元素还是深度定制的复杂业务图表都能从配置与扩展两个维度从容应对。【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址: https://gitcode.com/gh_mirrors/g6/G6创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考