数据可视化前端图表库【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址https://gitcode.com/gh_mirrors/g6/G6点击查看免费下载节点是图可视化中最核心的构成单元。本文以 G6 官方文档《节点总览》为主线结合 G6 仓库源码packages/g6/src/elements/nodes、packages/g6/src/registry/build-in.ts等逐层拆解 G6 的节点体系从内置节点、3D 节点、React 节点到自定义节点的整体分类从节点数据字段到三种配置方式的优先级关系再到状态样式与动态更新。读完本文你将掌握 G6 中选型 → 建数据 → 配样式 → 做交互的完整节点开发链路并理解这些能力在源码层面的实现原理。什么是节点节点Node是图中的基本元素之一表示图中的实体或抽象概念例如一个人、一个地点、一个组织等。节点可以包含一些属性例如节点的 ID、名称、类型等。在 G6 中节点可以具有多种形状和样式并支持丰富的交互和自定义功能。节点与节点之间通过**边Edge**连接以表示关系因此你可以在图中创建任意数量的节点并通过边将它们组织成完整的图结构。节点体系总览G6 的节点体系包括三大类内置节点、扩展节点3D 节点、React 节点等和自定义节点。其中大多数场景下使用内置节点即可满足需求无需注册、直接配置type字段即可使用。内置节点G6 内置了 10 种开箱即用的节点类型无需注册直接配置即可使用节点类型注册名称描述圆形节点circle常用于表示普通实体矩形节点rect适合展示更多文本和细节椭圆节点ellipse类似圆形的变体菱形节点diamond常用于决策点或特殊节点三角形节点triangle可用于指示方向或特殊标记六边形节点hexagon适合网格布局和蜂窝图星形节点star突出显示重要节点甜甜圈节点donut可展示比例或进度信息图片节点image使用图片作为节点主体HTML 节点html支持自定义 HTML 内容这一注册表在源码中有明确对应packages/g6/src/registry/build-in.ts第 174-185 行将circle、diamond、ellipse、hexagon、html、image、rect、star、donut、triangle这 10 个名称逐一映射到对应的节点类实现因此你在node.type或节点数据type字段中直接写入这些名称即可生效。从源码结构看每个内置节点都是一个独立的类文件位于 packages/g6/src/elements/nodes 目录下包括circle.ts、rect.ts、ellipse.ts、diamond.ts、donut.ts、hexagon.ts、triangle.ts、star.ts、image.ts、html.ts它们全部继承自抽象的BaseNode基类base-node.ts。以圆形节点为例circle.ts 中核心绘制逻辑为protected drawKeyShape(attributes: RequiredCircleStyleProps, container: Group) { return this.upsert(key, GCircle, this.getKeyStyle(attributes), container); } protected getKeyStyle(attributes: RequiredCircleStyleProps): GCircleStyleProps { const keyStyle super.getKeyStyle(attributes); // 圆形半径 size 最小值的一半 return { ...keyStyle, r: Math.min(...this.getSize(attributes)) / 2 }; }可以看到circle的半径由size推导r min(size) / 2并且其连线交点计算使用椭圆求交算法getEllipseIntersectPoint这保证边始终从节点轮廓边界出发而非圆心。矩形节点 rect.ts 则会将 keyShape 的x/y偏移至-width/2、-height/2实现以节点中心为原点居中绘制。各内置节点类型的详细样式配置可进一步查阅 Circle.zh.md、Rect.zh.md 等对应文档。3D 节点当使用 WebGL 渲染器时antv/g6-extension-3d提供了 3D 节点Capsule— 胶囊型节点Cone— 圆锥型节点Cube— 立方体节点Cylinder— 圆柱型节点Plane— 平面节点Sphere— 球体节点Torus— 圆环节点这些 3D 节点的实现位于 packages/g6-extension-3d/src/elements 目录每个几何体capsule.ts、cone.ts、cube.ts、cylinder.ts、plane.ts、sphere.ts、torus.ts对应一个节点类并统一继承BaseNode3Dbase-node-3d.ts。3D 节点与内置 2D 节点一样属于扩展包提供的类型需要在渲染前注册后使用。React 节点antv/g6-extension-react提供了 React 节点支持使用 React 组件作为节点的主体使节点内容具备组件化的渲染与交互能力。其实现位于 packages/g6-extension-react/src/react-node包含针对 React 16/18 的不同渲染适配render16.ts、render18.ts。详细教程请查看 使用 React 定义节点 文档。自定义节点当内置节点和扩展节点无法满足需求时G6 提供了强大的自定义能力继承内置节点进行扩展以BaseNode或任一内置节点为基类只需关注 keyShape主图形的绘制逻辑即可创建全新的节点类型完全自定义节点的渲染与行为。与内置节点不同自定义节点需要先注册后使用。详细教程请参考 自定义节点 文档。节点的数据结构定义节点时需要在图的数据对象中添加nodes字段。每个节点是一个对象其字段结构如下属性描述类型默认值必选id节点的唯一标识符用于区分不同的节点string-✓type节点类型内置节点类型名称或自定义节点的名称string-data节点数据用于存储节点的自定义数据例如节点的名称、描述等。可以在样式映射中通过回调函数获取object-style节点样式包括位置、大小、颜色等视觉属性object-states节点初始状态如选中、激活、悬停等string[]-combo所属组合的 ID用于组织节点的层级关系如果没有则为 nullstring | null-children子节点 ID 集合仅在树图场景下使用string[]-nodes数组中一个数据项的示例{ id: node-1, type: circle, data: { name: alice, role: Admin }, style: { x: 100, y: 200, size: 32, fill: violet }, states: [selected], combo: null }从源码设计看data与style的分离非常关键data存放业务自定义数据名称、描述等而style存放视觉属性样式映射阶段可以通过回调函数读取data中的值做条件化渲染见下文调整优先级示例。style中常用的视觉字段在BaseNode的defaultStylePropsbase-node.ts 第 197-225 行中有默认值例如x: 0、y: 0、size: 32以及label: true默认显示标签、halo: false默认关闭光晕、icon: true默认启用图标等。节点配置的三种方式配置节点的方式有三种按优先级从高到低排列使用graph.setNode()动态配置最高优先级实例化图时全局配置在数据中动态配置最低优先级这三种配置方式可以同时使用当存在相同配置项时优先级高的方式会覆盖优先级低的。使用graph.setNode()可在图实例创建后使用graph.setNode()动态设置节点的样式映射逻辑。该方法需要在graph.render()之前调用才会生效并拥有最高优先级graph.setNode({ style: { type: circle, style: { size: 60, fill: #7FFFD4, stroke: #5CACEE, lineWidth: 2 }, }, }); graph.render();实例化图时全局配置在实例化图时通过node字段配置节点样式映射。这里的配置是全局配置会在所有节点上生效import { Graph } from antv/g6; const graph new Graph({ node: { type: circle, style: { size: 60, fill: #7FFFD4, stroke: #5CACEE, lineWidth: 2 }, }, });注意这里配置的type与style与节点数据中的字段同名同义全局配置充当了默认模板为所有未显式指定这些字段的节点提供兜底值。在数据中动态配置如果需要为不同节点进行不同的配置可以将配置直接写入节点数据中const data { nodes: [ { id: node-1, type: circle, style: { size: 60, fill: #7FFFD4, stroke: #5CACEE, lineWidth: 2 }, }, ], };调整优先级默认情况下graph.setNode() 全局node配置 数据内配置。如果你希望数据中配置的优先级高于全局配置例如不同节点的描边颜色各不相同可以在全局配置中使用回调函数动态读取数据中的值这样数据内配置的值就会被最终采用const data { nodes: [ { id: node-1, type: circle, style: { size: 60, fill: #7FFFD4, stroke: #5CACEE, lineWidth: 2 }, }, ], }; const graph new Graph({ node: { type: circle, style: { // 回调函数接收节点数据从中读取样式值 stroke: (d) d.style.stroke || #5CACEE, lineWidth: 2, }, }, });回调函数如(d) d.style.stroke || #5CACEE的参数即节点的数据对象这正体现了上文提到的data与style分离设计通过回调全局配置可以针对每个节点的数据动态计算样式实现数据驱动样式的灵活映射。动态更新节点G6 支持在运行时动态更新节点的样式和状态// 更新单个节点样式 graph.updateNodeData([ { id: node-1, style: { fill: red, size: 80, }, }, ]); graph.draw(); // 设置节点状态 graph.setElementState(node-1, [selected]);:::warning{title注意} 更新节点时只有指定的属性会被更新未指定的属性保持不变。 :::更多与节点相关的 API 请参考 API - 元素操作。节点状态节点可以拥有不同的状态例如选中、高亮、禁用等。通过配置状态样式state可以定义节点在不同状态下的显示效果const graph new Graph({ node: { style: { // 默认样式 fill: #C6E5FF, }, // 状态样式 state: { selected: { fill: #ffa940, stroke: #ff7a00, haloStroke: #ff7a00, }, highlight: { stroke: #1890ff, lineWidth: 3, }, }, }, });状态系统是实现节点交互效果的基础。例如配合graph.setElementState(node-1, [selected])即可让节点切换为选中态的橙色样式也可以与 click-select、hover-activate 等内置交互行为联动实现点击选中、悬停高亮等开箱即用的体验。更多状态相关内容可参考 BaseNode.zh.md 及各内置节点文档中的状态配置说明。从源码理解节点的渲染顺序与默认样式为了更高效地定制节点了解BaseNode的渲染机制很有帮助。在 base-node.ts第 407-426 行的render()方法中节点的绘制遵循固定顺序keyShape主图形决定节点的整体轮廓如圆、矩形、多边形halo光晕默认关闭halo: false常与状态高亮配合使用默认haloStrokeOpacity: 0.25、haloLineWidth: 12icon图标默认启用icon: true图标尺寸默认按主图形尺寸的比例ICON_SIZE_RATIO自动推导badges徽标默认启用badge: true支持多个徽标及背景色板badgePalettelabel文本标签默认启用label: true默认放置在节点底部labelPlacement: bottom支持labelMaxWidth: 200%自动换行labelWordWrap默认关闭ports连接桩默认启用port: true支持通过ports数组配置多个连接桩及各自位置。各子形状的 zIndex 层级为halo-1 label0 icon1 port2 badge3。理解这一渲染管线后你在配置style中的labelText、iconSrc、badges、ports等字段时就能清楚它们各自作用于哪一层图形。此外自定义节点时建议直接继承BaseNode源码注释亦明确推荐这样只需要实现drawKeyShape()一个抽象方法halo、icon、badges、label、ports 等通用能力都会被基类自动复用这也是 自定义节点 文档背后的源码支撑。小结G6 的节点能力可以概括为一条清晰的选型路径大多数场景直接使用 10 种内置节点 → 3D 场景使用 g6-extension-3d 的几何节点 → 组件化场景使用 React 节点 → 特殊需求继承 BaseNode 自定义。配合graph.setNode() 全局node配置 数据内配置的优先级体系、回调函数式的样式映射以及状态样式系统你可以灵活地构建从静态展示到复杂交互的各类图应用。本文涉及的源码与文档均在仓库中可查证可进一步阅读节点实现源码packages/g6/src/elements/nodes内置节点注册表packages/g6/src/registry/build-in.ts3D 节点packages/g6-extension-3d/src/elementsReact 节点packages/g6-extension-react/src/react-node各节点类型详细文档packages/site/docs/manual/element/node元素操作 APIpackages/site/docs/api/element.zh.md赞分享数据可视化前端图表库【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址https://gitcode.com/gh_mirrors/g6/G6点击查看免费下载相关推荐G6 边Edge完全指南内置类型、数据结构与配置优先级解析G6 边Edge完全指南内置类型、数据结构与配置优先级解析 本文围绕图可视化框架 G6 中边Edge这一基础元素展开系统讲解边的概念与方向性、六数据可视化前端图表库G6 矩形节点Rect Node实战指南配置、样式扩展与源码实现解析G6 矩形节点Rect Node实战指南配置、样式扩展与源码实现解析 矩形节点是 G6 中最基础、应用最广泛的节点形态之一。它以明确的边界和规整的几何形状数据可视化前端图表库G6 Hexagon Node 六边形节点样式配置、顶点计算与底层实现解析G6 Hexagon Node 六边形节点样式配置、顶点计算与底层实现解析 六边形Hexagon是 G6 图可视化框架内置的一种多边形节点凭借六条等边的数据可视化前端图表库创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 G6 节点（Node）体系全解析：内置类型、数据结构与样式配置实战
数据可视化前端图表库【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址https://gitcode.com/gh_mirrors/g6/G6点击查看免费下载节点是图可视化中最核心的构成单元。本文以 G6 官方文档《节点总览》为主线结合 G6 仓库源码packages/g6/src/elements/nodes、packages/g6/src/registry/build-in.ts等逐层拆解 G6 的节点体系从内置节点、3D 节点、React 节点到自定义节点的整体分类从节点数据字段到三种配置方式的优先级关系再到状态样式与动态更新。读完本文你将掌握 G6 中选型 → 建数据 → 配样式 → 做交互的完整节点开发链路并理解这些能力在源码层面的实现原理。什么是节点节点Node是图中的基本元素之一表示图中的实体或抽象概念例如一个人、一个地点、一个组织等。节点可以包含一些属性例如节点的 ID、名称、类型等。在 G6 中节点可以具有多种形状和样式并支持丰富的交互和自定义功能。节点与节点之间通过**边Edge**连接以表示关系因此你可以在图中创建任意数量的节点并通过边将它们组织成完整的图结构。节点体系总览G6 的节点体系包括三大类内置节点、扩展节点3D 节点、React 节点等和自定义节点。其中大多数场景下使用内置节点即可满足需求无需注册、直接配置type字段即可使用。内置节点G6 内置了 10 种开箱即用的节点类型无需注册直接配置即可使用节点类型注册名称描述圆形节点circle常用于表示普通实体矩形节点rect适合展示更多文本和细节椭圆节点ellipse类似圆形的变体菱形节点diamond常用于决策点或特殊节点三角形节点triangle可用于指示方向或特殊标记六边形节点hexagon适合网格布局和蜂窝图星形节点star突出显示重要节点甜甜圈节点donut可展示比例或进度信息图片节点image使用图片作为节点主体HTML 节点html支持自定义 HTML 内容这一注册表在源码中有明确对应packages/g6/src/registry/build-in.ts第 174-185 行将circle、diamond、ellipse、hexagon、html、image、rect、star、donut、triangle这 10 个名称逐一映射到对应的节点类实现因此你在node.type或节点数据type字段中直接写入这些名称即可生效。从源码结构看每个内置节点都是一个独立的类文件位于 packages/g6/src/elements/nodes 目录下包括circle.ts、rect.ts、ellipse.ts、diamond.ts、donut.ts、hexagon.ts、triangle.ts、star.ts、image.ts、html.ts它们全部继承自抽象的BaseNode基类base-node.ts。以圆形节点为例circle.ts 中核心绘制逻辑为protected drawKeyShape(attributes: RequiredCircleStyleProps, container: Group) { return this.upsert(key, GCircle, this.getKeyStyle(attributes), container); } protected getKeyStyle(attributes: RequiredCircleStyleProps): GCircleStyleProps { const keyStyle super.getKeyStyle(attributes); // 圆形半径 size 最小值的一半 return { ...keyStyle, r: Math.min(...this.getSize(attributes)) / 2 }; }可以看到circle的半径由size推导r min(size) / 2并且其连线交点计算使用椭圆求交算法getEllipseIntersectPoint这保证边始终从节点轮廓边界出发而非圆心。矩形节点 rect.ts 则会将 keyShape 的x/y偏移至-width/2、-height/2实现以节点中心为原点居中绘制。各内置节点类型的详细样式配置可进一步查阅 Circle.zh.md、Rect.zh.md 等对应文档。3D 节点当使用 WebGL 渲染器时antv/g6-extension-3d提供了 3D 节点Capsule— 胶囊型节点Cone— 圆锥型节点Cube— 立方体节点Cylinder— 圆柱型节点Plane— 平面节点Sphere— 球体节点Torus— 圆环节点这些 3D 节点的实现位于 packages/g6-extension-3d/src/elements 目录每个几何体capsule.ts、cone.ts、cube.ts、cylinder.ts、plane.ts、sphere.ts、torus.ts对应一个节点类并统一继承BaseNode3Dbase-node-3d.ts。3D 节点与内置 2D 节点一样属于扩展包提供的类型需要在渲染前注册后使用。React 节点antv/g6-extension-react提供了 React 节点支持使用 React 组件作为节点的主体使节点内容具备组件化的渲染与交互能力。其实现位于 packages/g6-extension-react/src/react-node包含针对 React 16/18 的不同渲染适配render16.ts、render18.ts。详细教程请查看 使用 React 定义节点 文档。自定义节点当内置节点和扩展节点无法满足需求时G6 提供了强大的自定义能力继承内置节点进行扩展以BaseNode或任一内置节点为基类只需关注 keyShape主图形的绘制逻辑即可创建全新的节点类型完全自定义节点的渲染与行为。与内置节点不同自定义节点需要先注册后使用。详细教程请参考 自定义节点 文档。节点的数据结构定义节点时需要在图的数据对象中添加nodes字段。每个节点是一个对象其字段结构如下属性描述类型默认值必选id节点的唯一标识符用于区分不同的节点string-✓type节点类型内置节点类型名称或自定义节点的名称string-data节点数据用于存储节点的自定义数据例如节点的名称、描述等。可以在样式映射中通过回调函数获取object-style节点样式包括位置、大小、颜色等视觉属性object-states节点初始状态如选中、激活、悬停等string[]-combo所属组合的 ID用于组织节点的层级关系如果没有则为 nullstring | null-children子节点 ID 集合仅在树图场景下使用string[]-nodes数组中一个数据项的示例{ id: node-1, type: circle, data: { name: alice, role: Admin }, style: { x: 100, y: 200, size: 32, fill: violet }, states: [selected], combo: null }从源码设计看data与style的分离非常关键data存放业务自定义数据名称、描述等而style存放视觉属性样式映射阶段可以通过回调函数读取data中的值做条件化渲染见下文调整优先级示例。style中常用的视觉字段在BaseNode的defaultStylePropsbase-node.ts 第 197-225 行中有默认值例如x: 0、y: 0、size: 32以及label: true默认显示标签、halo: false默认关闭光晕、icon: true默认启用图标等。节点配置的三种方式配置节点的方式有三种按优先级从高到低排列使用graph.setNode()动态配置最高优先级实例化图时全局配置在数据中动态配置最低优先级这三种配置方式可以同时使用当存在相同配置项时优先级高的方式会覆盖优先级低的。使用graph.setNode()可在图实例创建后使用graph.setNode()动态设置节点的样式映射逻辑。该方法需要在graph.render()之前调用才会生效并拥有最高优先级graph.setNode({ style: { type: circle, style: { size: 60, fill: #7FFFD4, stroke: #5CACEE, lineWidth: 2 }, }, }); graph.render();实例化图时全局配置在实例化图时通过node字段配置节点样式映射。这里的配置是全局配置会在所有节点上生效import { Graph } from antv/g6; const graph new Graph({ node: { type: circle, style: { size: 60, fill: #7FFFD4, stroke: #5CACEE, lineWidth: 2 }, }, });注意这里配置的type与style与节点数据中的字段同名同义全局配置充当了默认模板为所有未显式指定这些字段的节点提供兜底值。在数据中动态配置如果需要为不同节点进行不同的配置可以将配置直接写入节点数据中const data { nodes: [ { id: node-1, type: circle, style: { size: 60, fill: #7FFFD4, stroke: #5CACEE, lineWidth: 2 }, }, ], };调整优先级默认情况下graph.setNode() 全局node配置 数据内配置。如果你希望数据中配置的优先级高于全局配置例如不同节点的描边颜色各不相同可以在全局配置中使用回调函数动态读取数据中的值这样数据内配置的值就会被最终采用const data { nodes: [ { id: node-1, type: circle, style: { size: 60, fill: #7FFFD4, stroke: #5CACEE, lineWidth: 2 }, }, ], }; const graph new Graph({ node: { type: circle, style: { // 回调函数接收节点数据从中读取样式值 stroke: (d) d.style.stroke || #5CACEE, lineWidth: 2, }, }, });回调函数如(d) d.style.stroke || #5CACEE的参数即节点的数据对象这正体现了上文提到的data与style分离设计通过回调全局配置可以针对每个节点的数据动态计算样式实现数据驱动样式的灵活映射。动态更新节点G6 支持在运行时动态更新节点的样式和状态// 更新单个节点样式 graph.updateNodeData([ { id: node-1, style: { fill: red, size: 80, }, }, ]); graph.draw(); // 设置节点状态 graph.setElementState(node-1, [selected]);:::warning{title注意} 更新节点时只有指定的属性会被更新未指定的属性保持不变。 :::更多与节点相关的 API 请参考 API - 元素操作。节点状态节点可以拥有不同的状态例如选中、高亮、禁用等。通过配置状态样式state可以定义节点在不同状态下的显示效果const graph new Graph({ node: { style: { // 默认样式 fill: #C6E5FF, }, // 状态样式 state: { selected: { fill: #ffa940, stroke: #ff7a00, haloStroke: #ff7a00, }, highlight: { stroke: #1890ff, lineWidth: 3, }, }, }, });状态系统是实现节点交互效果的基础。例如配合graph.setElementState(node-1, [selected])即可让节点切换为选中态的橙色样式也可以与 click-select、hover-activate 等内置交互行为联动实现点击选中、悬停高亮等开箱即用的体验。更多状态相关内容可参考 BaseNode.zh.md 及各内置节点文档中的状态配置说明。从源码理解节点的渲染顺序与默认样式为了更高效地定制节点了解BaseNode的渲染机制很有帮助。在 base-node.ts第 407-426 行的render()方法中节点的绘制遵循固定顺序keyShape主图形决定节点的整体轮廓如圆、矩形、多边形halo光晕默认关闭halo: false常与状态高亮配合使用默认haloStrokeOpacity: 0.25、haloLineWidth: 12icon图标默认启用icon: true图标尺寸默认按主图形尺寸的比例ICON_SIZE_RATIO自动推导badges徽标默认启用badge: true支持多个徽标及背景色板badgePalettelabel文本标签默认启用label: true默认放置在节点底部labelPlacement: bottom支持labelMaxWidth: 200%自动换行labelWordWrap默认关闭ports连接桩默认启用port: true支持通过ports数组配置多个连接桩及各自位置。各子形状的 zIndex 层级为halo-1 label0 icon1 port2 badge3。理解这一渲染管线后你在配置style中的labelText、iconSrc、badges、ports等字段时就能清楚它们各自作用于哪一层图形。此外自定义节点时建议直接继承BaseNode源码注释亦明确推荐这样只需要实现drawKeyShape()一个抽象方法halo、icon、badges、label、ports 等通用能力都会被基类自动复用这也是 自定义节点 文档背后的源码支撑。小结G6 的节点能力可以概括为一条清晰的选型路径大多数场景直接使用 10 种内置节点 → 3D 场景使用 g6-extension-3d 的几何节点 → 组件化场景使用 React 节点 → 特殊需求继承 BaseNode 自定义。配合graph.setNode() 全局node配置 数据内配置的优先级体系、回调函数式的样式映射以及状态样式系统你可以灵活地构建从静态展示到复杂交互的各类图应用。本文涉及的源码与文档均在仓库中可查证可进一步阅读节点实现源码packages/g6/src/elements/nodes内置节点注册表packages/g6/src/registry/build-in.ts3D 节点packages/g6-extension-3d/src/elementsReact 节点packages/g6-extension-react/src/react-node各节点类型详细文档packages/site/docs/manual/element/node元素操作 APIpackages/site/docs/api/element.zh.md赞分享数据可视化前端图表库【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址https://gitcode.com/gh_mirrors/g6/G6点击查看免费下载相关推荐G6 边Edge完全指南内置类型、数据结构与配置优先级解析G6 边Edge完全指南内置类型、数据结构与配置优先级解析 本文围绕图可视化框架 G6 中边Edge这一基础元素展开系统讲解边的概念与方向性、六数据可视化前端图表库G6 矩形节点Rect Node实战指南配置、样式扩展与源码实现解析G6 矩形节点Rect Node实战指南配置、样式扩展与源码实现解析 矩形节点是 G6 中最基础、应用最广泛的节点形态之一。它以明确的边界和规整的几何形状数据可视化前端图表库G6 Hexagon Node 六边形节点样式配置、顶点计算与底层实现解析G6 Hexagon Node 六边形节点样式配置、顶点计算与底层实现解析 六边形Hexagon是 G6 图可视化框架内置的一种多边形节点凭借六条等边的数据可视化前端图表库创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考