跳转到使用指南
AntV G6 Graph作者 antvis

AntV G6 Graph Skill.

基于节点和边数据,为现有网络与层级结构构建交互式视图。

  • 图可视化
  • 网络
  • AntV
来源审查 · AntV G6 GraphSKILL.md
任务 图可视化 产出 • 为所提供的关系数据集配置的 G6 图视图 JavaScript • 针对节点、边和分组的布局与视觉编码选择 • 缩放、拖动或选择等明确的探索行为 开始之前 需要一个使用 @antv/g6 v5 的应用、一个浏览器图容器;如果需要使用文档所述的参考资料检索服务,还需具备网络访问条件。请根据已安装的版本核验 API。
编辑摘要 · 来源审查于 2026-10-07 · 并非生成的示例

01 功能说明

AntV G6 Graph:探索关联数据

一份 G6 v5 图视图指南,涵盖明确的节点与边数据、声明式设置、迁移注意事项以及针对特定任务的参考资料检索。

基于来源的工作流程并非执行基准测试

工作方法

AntV G6 Graph 专注于可视化关联数据,包括网络、树、层级结构、思维导图及其他节点与边结构。收录的技能面向 G6 v5,通过声明式配置来组织图的数据、布局、外观、行为和插件。其核心问题是应如何展示和探索关系结构。

该条目将具体的 v5 迁移注意事项与面向专业主题的远程参考资料检索服务结合起来。它区分了 G6、用于统计图表的 G2 和图编辑器 X6。节点与边构成的图形可能看起来像编辑器画布,但展示现有网络不同于让用户构建并持久化工作流。

预期交付物

  • 为所提供的关系数据集配置的 G6 图视图 JavaScript
  • 针对节点、边和分组的布局与视觉编码选择
  • 缩放、拖动或选择等明确的探索行为
查看示例简述

从简述到审查

  1. 01
    验证关系数据

    为每个节点指定唯一 ID,并确保边的端点引用预期节点。将标签和视觉属性与关系本身分开。

  2. 02
    选择视图

    根据结构选择力导向、树状、层级、径向或其他合适的布局。当配置细节超出入口文件的内容范围时,检索相关的 G6 参考资料。

  3. 03
    配置 G6 v5

    采用针对目标版本记录的数据、样式、行为和渲染约定,不要混入凭记忆使用的 v4 配置。

  4. 04
    检查图

    在实际浏览器运行环境中检查渲染后的标签、端点关系、布局可读性和预期交互。审查密集或不连通的部分,而不只是整齐的样例。

02 适用场景

适用场景

需要一个使用 @antv/g6 v5 的应用、一个浏览器图容器;如果需要使用文档所述的参考资料检索服务,还需具备网络访问条件。请根据已安装的版本核验 API。

适合的场景

  • 关系探索当网络结构本身就是界面主题时,适合用于呈现实体及其连接关系。
  • 树和层级视图来源会将树、思维导图、鱼骨图和层级结构请求引导至专门的布局指南。
  • G6 迁移工作在审查旧版 G6 代码时,其中明确列出的数据、标签、行为和布局选项差异具有参考价值。

需要核查的限制

  • 不适用于图编辑器工作流当主要需求是创作相连的节点、端口和可编辑的图状态时,应选择 X6 编辑器指南。
  • 不适用于统计图表此技能明确排除 G2 图表和 S2 透视表;图布局不能替代定量图表编码。
  • 版本和运行环境检查来源面向 v5。其中的约束和示例属于参考资料,不能证明某个特定项目或旧版本已经过测试。

请提供这些输入

  • 实体和连接提供节点标识符、边端点、标签以及任何有意义的分组关系。
  • 探索任务说明读者需要检查网络、沿层级结构浏览、识别分组,还是查看选定的连接。
  • 项目约束提供已安装的 G6 版本、图容器、预期数据规模和所需的浏览器交互。

03 关键决策

重要决策

  1. 数据先于布局

    如果标识符或端点不一致,即使网络在视觉上看似合理,也可能是错误的。明确的数据契约使这些错误可以被检查。

  2. 迁移细节清晰可见

    标签位置和行为配置在不同 API 代际之间发生了变化;来源明确指出这些差异,而不是将所有 G6 示例视为可以互换。

  3. 针对性参考资料检索

    该条目会将折叠展开或节点样式等任务映射到有针对性的参考查询,而无须一次请求所有图功能。

04 示例任务

尝试一份聚焦的简述

以下示例简述尚未经过测试。使用前请检查该技能的设置。

审查设置

从仓库获取 antv-g6-graph 技能目录,并为项目单独配置 G6 运行环境。该条目中的 CDN 示例用于运行时加载,并非经过验证的技能安装命令。

上游源文件
https://github.com/antvis/chart-visualization-skills/blob/a105fa12a9fa41fccccc2eba7f4b34973628f5d3/skills/antv-g6-graph/SKILL.md

需要一个使用 @antv/g6 v5 的应用、一个浏览器图容器;如果需要使用文档所述的参考资料检索服务,还需具备网络访问条件。请根据已安装的版本核验 API。

从一项交付物开始

运行该技能前,请根据需要调整这份简述中的范围、来源材料和约束。

示例简述
使用 antv-g6-graph,根据所提供的节点和边构建只读的依赖关系网络视图。验证每个端点,检查我们已安装的 G6 版本,并说明布局选择。只添加检查依赖关系所需的缩放、拖动和选择行为。查阅相关的 v5 参考资料,而不要复制 v4 选项,并将运行时检查结果与未经测试的假设分开报告。

检查结果

依据以下可观察标准检查实际输出。

  • 每条渲染出的边都对应有效的输入端点。
  • 布局和标签能让实际关系结构清晰可读。
  • 配置的行为能在已安装的 G6 运行环境中正常工作,且不使用不受支持的旧版选项。

OpenDesign 为编码智能体提供本地设计工作区。此条目并不表示该技能已内置,也不表示其中包含其外部工具、凭据和软件依赖项。

05 来源与许可证

来源和许可证

本页介绍下方链接所指向的固定来源修订版本。上游行为和要求可能会发生变化。

来源所有者
antvis
许可证
MIT
已审查的快照
2026-10-07 · a105fa12a9fa
编辑来源摘要
一份 G6 v5 图视图指南,涵盖明确的节点与边数据、声明式设置、迁移注意事项以及针对特定任务的参考资料检索。

由 OpenDesign 根据链接来源撰写的原创摘要。仓库星标数只是带有时间属性的受欢迎程度指标,并不代表技能使用情况或质量评分。

06 开始前的问题

开始前的问题

这与 G2 有何不同?

此处的 G6 用于关联实体和图布局。来源明确排除了 G2 的统计图表用例。

我应该用它构建可编辑的工作流画布吗?

如果主要需求是创作节点、连接端口、编辑器插件和保存图状态,来源会将该任务划分给 X6。

该技能是否包含所有 G6 API 参考资料?

不包含。它提供关键模式,以及用于检索更详细的布局、样式、事件、行为和插件文档的服务。

OpenDesign

为下一轮设计迭代留出空间。

在本地工作区中集中保存简述、来源材料和设计工作。将该技能添加到工作流程前,请检查其自身的设置。

上游源文件
https://github.com/antvis/chart-visualization-skills/blob/a105fa12a9fa41fccccc2eba7f4b34973628f5d3/skills/antv-g6-graph/SKILL.md