G6 矩形节点（Rect Node）实战指南：配置、样式扩展与源码实现解析

数据可视化前端图表库【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址https://gitcode.com/gh_mirrors/g6/G6点击查看免费下载矩形节点是 G6 中最基础、应用最广泛的节点形态之一。它以明确的边界和规整的几何形状天然适合表达模块、组件、容器等实体并常被用于组织架构图、文件目录树、流程图、架构图与 UML 图等层级或流程类场景。本文以 G6 官方文档 Rect.en.md 为主线结合仓库中矩形节点的源码实现与测试用例系统讲解 Rect 节点的创建方式、核心与扩展样式配置、内建状态表现以及其底层绘制原理帮助你从会用进阶到懂原理。Rect 节点是什么在 G6 中节点Node通过node.type指定具体形态。当type为rect时节点将渲染为一个矩形它是由 G6 内置注册的矩形节点类Rect绘制的注册位置见 packages/g6/src/registry/build-in.ts其中rect: Rect即为该类型的内建注册项。适用场景根据官方文档的定位矩形节点主要适合以下场景表示模块、组件或容器用矩形边界承载一块明确的功能区域如微服务模块、系统组件、业务流程中的处理单元。表示层级关系组织架构图、文件目录树等需要盒子套盒子的表达方式矩形天然贴合。流程与架构类图示流程图、架构图、UML 图等大量使用矩形作为标准图形元素。官方在线体验官方文档通过嵌入式 Playground 提供了可直接交互的在线示例见 packages/site/common/api/elements/nodes/rect.md其中将node.type设置为rect即可实时拖拽调节矩形的宽size[0]与高size[1]createGraph( { autoFit: center, data: { nodes: [{ id: node1, style: { size: 40, fill: #7e3feb } }] }, node: { type: rect }, plugins: [{ type: grid-line, size: 30 }], }, { width: 600, height: 220 }, );快速上手创建一个 Rect 节点在真实业务中最简单的 Rect 节点用法如下import { Graph } from antv/g6; const graph new Graph({ container: container, data: { nodes: [{ id: node-1, style: { size: [160, 80], fill: #7e3feb } }], }, node: { type: rect, }, }); graph.render();要点说明container图渲染挂载的 DOM 容器 iddata.nodes[].style.size既可以是数字如40表示宽高相等的正方形也可以是数组如[160, 80]分别表示宽度与高度对应官方 Playground 中的size[0]与size[1]两个调节项node.type: rect声明节点形态为矩形缺省该配置时 G6 会使用默认节点类型。核心几何样式尺寸与圆角Rect节点的实现位于 packages/g6/src/elements/nodes/rect.ts。从源码看矩形主体key shape由antv/g的GRect图形绘制核心逻辑在getKeyStyle中protected getKeyStyle(attributes: ParsedRectStyleProps): GRectStyleProps { const [width, height] this.getSize(attributes); return { ...super.getKeyStyle(attributes), width, height, x: -width / 2, y: -height / 2, }; }从中可以确认几个实现细节size会被解析为宽width与高height矩形以节点中心为原点绘制因此x、y取负半宽与负半高即矩形的几何中心即节点坐标位置这与边、连接桩等依赖中心点的计算保持一致除宽高外矩形还继承了BaseNode的全部通用图形样式fill、stroke、lineWidth、opacity等并支持通过radius设置圆角。仓库内的演示用例 element-node-rect.ts 就展示了radius: 4的圆角矩形配置node: { type: rect, // Node shape type. style: { radius: 4, // Set the radius. size: 40, labelText: (d) d.id!, iconFontFamily: iconfont, iconText: \ue602, }, },扩展样式能力label / halo / icon / badge / portRect 节点并非只有一个矩形。由于Rect继承自BaseNode见 packages/g6/src/elements/nodes/base-node.ts它天然具备五层结构key主体、halo光晕、icon图标、badges徽标、label标签、ports连接桩。BaseNode.render方法依次绘制这些图形public render(attributes this.parsedAttributes, container: Group this) { // 1. key shape this._drawKeyShape(attributes, container); // 2. halo this.drawHaloShape(attributes, container); // 3. icon this.drawIconShape(attributes, container); // 4. badges this.drawBadgeShapes(attributes, container); // 5. label this.drawLabelShape(attributes, container); // 6. ports this.drawPortShapes(attributes, container); }通用属性默认值BaseNode为这些扩展能力提供了一组默认值见 base-node.ts理解它们有助于判断为什么某些样式没生效属性默认值说明size32默认节点尺寸label/labelTexttrue/ 无标签开关需配合labelText才显示文字labelPlacementbottom标签默认位于节点下方labelMaxWidth200%标签最大宽度超过自动换行halofalse光晕默认关闭haloLineWidth/haloStrokeOpacity12/0.25光晕描边宽度与透明度icontrue图标默认开启但需提供iconText或iconSrcbadge/badgestrue/[]徽标默认开启但列表为空不渲染port/portstrue/[]连接桩默认开启但列表为空不渲染图标尺寸的等比缩放矩形节点在绘制图标时还有一个独特处理getIconStyle会根据 key 图形矩形的实际宽高乘以ICON_SIZE_RATIO等比计算图标尺寸见 rect.ts从而保证图标始终与矩形大小协调不会出现大矩形配小图标或反之的失衡情况。状态样式active / selected / highlight / inactive / disabled官方文档的完整示例通过states字段一次性展示了 6 种内建交互状态下的矩形表现default、halo、badges、ports、active、selected、highlight、inactive、disabled。状态通过在节点数据上声明states数组来触发const data { nodes: [ { id: default }, { id: active, states: [active] }, { id: selected, states: [selected] }, { id: highlight, states: [highlight] }, { id: inactive, states: [inactive] }, { id: disabled, states: [disabled] }, ], };active激活、selected选中、highlight高亮、inactive失活、disabled禁用都是 G6 内建的状态名称可通过graph.setElementState动态切换配合主题Theme可以统一定义每种状态下矩形的填充色、描边色与透明度实现鼠标悬停、点击选中、数据高亮等常见交互反馈。完整示例一个包含全部扩展能力的 Rect 节点以下是官方文档提供的完整示例保留原始代码并补充注释它综合展示了 Rect 节点的标签、图标字体、光晕、徽标与连接桩配置import { Graph, iconfont } from antv/g6; // 引入 iconfont 图标字体用于 iconText 的图标渲染 const style document.createElement(style); style.innerHTML import url(${iconfont.css});; document.head.appendChild(style); const data { nodes: [ { id: default }, { id: halo }, { id: badges }, { id: ports }, { id: active, states: [active] }, { id: selected, states: [selected] }, { id: highlight, states: [highlight] }, { id: inactive, states: [inactive] }, { id: disabled, states: [disabled] }, ], }; const graph new Graph({ container: container, data, node: { type: rect, style: { size: 40, // 标签文本取节点 id labelText: (d) d.id, // 使用 iconfont 字体与对应码点渲染图标 iconFontFamily: iconfont, iconText: \ue602, // 仅 id 为 halo 的节点显示光晕 halo: (d) (d.id halo ? true : false), // 仅 id 为 badges 的节点显示 3 个徽标分别位于右上、右侧、右下 badges: (d) d.id badges ? [ { text: A, placement: right-top }, { text: Important, placement: right }, { text: Notice, placement: right-bottom }, ] : [], badgeFontSize: 8, badgePadding: [1, 4], // 连接桩半径 portR: 3, // 仅 id 为 ports 的节点在四个方位各显示一个连接桩 ports: (d) d.id ports ? [{ placement: left }, { placement: right }, { placement: top }, { placement: bottom }] : [], }, }, // 使用 grid 布局将节点排布整齐 layout: { type: grid, }, }); graph.render();这段代码的实用价值在于展示了 G6 节点样式配置的函数式写法labelText、halo、badges、ports等属性都支持(d) ...回调按节点数据动态返回样式实现同一图内不同节点形态各异的效果。动态更新 Rect 节点样式官方 Playground 展示了运行时更新矩形尺寸的标准 API 流程——通过graph.updateNodeData修改节点样式后调用graph.render()重绘graph.updateNodeData([ { id: node1, style: { size: [object[size[0]], object[size[1]]] }, }, ]); graph.render();size同时支持数字与[width, height]数组两种写法更新时传入数组即可分别控制矩形的宽与高这一能力可用于实现节点自适应文本长度、拖拽改尺寸等交互。源码实现与注册机制注册链路rect类型能在node.type: rect下被识别依赖内置注册表。在 build-in.ts 的node分类中rect: Rect与circle、diamond、donut、ellipse、hexagon、html、image、star、triangle并列共同构成 G6 的内建节点类型集合。继承关系与扩展点Rect类本身非常轻量约 50 行其核心价值在于两点继承BaseNode获得通用能力标签、光晕、图标、徽标、连接桩的绘制逻辑全部收敛在基类中见 base-node.ts仅需实现drawKeyShape抽象方法官方基类注释明确说明自定义节点时推荐继承BaseNode只需关注主体图形的绘制逻辑即可。Rect正是这一扩展模型的典型范例——开发者可以参照它通过extend快速定制圆角矩形胶囊矩形等衍生节点。测试与快照验证仓库为 Rect 节点提供了对应的单元测试与快照断言见 rect.spec.ts测试基于 element-node-rect.ts 演示用例构建图实例并通过toMatchSnapshot对渲染结果进行 SVG 快照比对describe(element label oversized, () { it(render, async () { const graph await createDemoGraph(elementNodeRect); await expect(graph).toMatchSnapshot(__filename); graph.destroy(); }); });这说明矩形的圆角、尺寸、图标字体渲染等行为都有自动化测试兜底可以作为你自定义节点时编写测试的参考模板。小结Rect 节点是 G6 内置节点之一通过node.type: rect启用注册于 build-in.ts矩形主体由GRect绘制size支持数字与[w, h]数组两种写法并以节点中心为原点见 rect.ts继承BaseNode获得 label / halo / icon / badge / port 五类扩展能力支持函数式动态样式与active、selected、highlight、inactive、disabled等内建状态运行时可通过updateNodeDatarender动态调整矩形尺寸与样式所有通用样式属性可参考 BaseNode.en.md交互式参数调节可体验官方 Playground rect.md。赞分享数据可视化前端图表库【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址https://gitcode.com/gh_mirrors/g6/G6点击查看免费下载相关推荐G6 矩形节点Rect完全指南配置、样式与源码实现解析G6 矩形节点Rect完全指南配置、样式与源码实现解析 矩形节点是 G6Graph Visualization Framework in JavaScr数据可视化前端图表库sentry-elixir与Plug/Phoenix集成构建稳定的Web应用监控系统sentry elixir与Plug/Phoenix集成构建稳定的Web应用监控系统 sentry elixir是Sentry官方推出的Elixir SDK数据可视化前端图表库G6 圆形节点Circle Node完全指南样式配置、状态切换与源码实现剖析G6 圆形节点Circle Node完全指南样式配置、状态切换与源码实现剖析 导读 圆形节点Circle Node是 G6 中最基础、最常用的节点形态数据可视化前端图表库上一篇microeco项目中Alpha多样性计算问题的技术解析下一篇Snipsnap未来路线图多语言支持和IDE扩展计划创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考