logo

G6

  • 文档
  • API
  • 图表示例
  • 社区
  • 所有产品antv logo arrow
  • 5.0.47
  • 简介
  • 开始使用
    • 快速开始
    • 安装
    • 前端框架集成
      • 在 React 中使用
      • 在 Vue 中使用
      • 在 Angular 中使用
    • 详细教程
  • 图 Graph
    • Graph - 图
    • Options 配置项
    • 内置扩展
    • Extension - 扩展
  • 数据 Data
  • 元素 Element
    • 元素总览
    • 元素状态
    • 节点 Node
      • 节点总览
      • 内置节点
        • 节点通用配置项
        • Diamond 菱形
        • Donut 甜甜圈
        • Ellipse 椭圆形
        • Hexagon 六边形
        • Html HTML
        • Image 图片
        • Rect 矩形
        • Star 五角形
        • Triangle 三角形
        • Circle 圆形
      • 自定义节点
      • 使用 React 定义节点
    • 边 Edge
      • 边总览
      • 内置边
        • 边通用配置项
        • Cubic 三次贝塞尔曲线
        • CubicHorizontal 水平三次贝塞尔曲线
        • CubicVertical 垂直三次贝塞尔曲线
        • Line 直线
        • Polyline 折线
        • Quadratic 二次贝塞尔曲线
      • 自定义边
    • 组合 Combo
      • 组合总览
      • 内置组合
        • 组合配置项
        • Circle 圆形
        • Rect 矩形
      • 自定义 Combo
    • 图形 Shape
      • 图形 Shape 与 KeyShape
      • 原子 Shape 以及其属性
      • 复合 Shape 的设计与实现
  • 布局 Layout
    • 布局总览
    • 内置布局
      • 布局通用配置项
      • AntvDagre 布局
      • Circular 环形布局
      • ComboCombined 复合布局
      • CompactBox 紧凑树
      • Concentric 同心圆布局
      • D3Force 力导向布局
      • D3Force3D 3D 力导向布局
      • Dagre 布局
      • Dendrogram 生态树
      • Fishbone 鱼骨布局
      • Force 力导向布局
      • ForceAtlas2 力导向布局
      • Fruchterman 力导向布局
      • Grid 网格布局
      • Indented 缩进树
      • MDS 高维数据降维布局
      • Mindmap 脑图树
      • Radial 径向布局
      • Random 随机布局
      • Snake 蛇形布局
    • 自定义布局
  • 交互 Behavior
    • 交互总览
    • 内置交互
      • AutoAdaptLabel 标签自适应显示
      • BrushSelect 框选
      • ClickSelect 点击选中
      • CollapseExpand 展开/收起元素
      • CreateEdge 创建边
      • DragCanvas 拖拽画布
      • DragElement 拖拽元素
      • DragElementForce 力导向拖拽元素
      • FixElementSize 缩放画布时固定元素大小
      • FocusElement 聚焦元素
      • HoverActivate 悬停激活
      • LassoSelect 套索选择
      • OptimizeViewportTransform 优化视口变换
      • ScrollCanvas 滚动画布
      • ZoomCanvas 缩放画布
    • 自定义交互
  • 插件 Plugin
    • 插件总览
    • 内置插件
      • Background 背景
      • BubbleSets 气泡集
      • Contextmenu 上下文菜单
      • EdgeBundling 边绑定
      • EdgeFilterLens 边过滤镜
      • Fisheye 鱼眼放大镜
      • Fullscreen 全屏展示
      • GridLine 网格线
      • History 历史记录
      • Hull 轮廓包围
      • Legend 图例
      • Minimap 小地图
      • Snapline 对齐线
      • Timebar 时间条
      • Toolbar 工具栏
      • Tooltip 提示框
      • Watermark 水印
    • 自定义插件
  • 数据处理 Transform
    • 数据处理总览
    • 内置数据处理
      • MapNodeSize 动态调整节点大小
      • PlaceRadialLabels 径向标签
      • ProcessParallelEdges 平行边
    • 自定义数据处理
  • 主题 Theme
    • 主题总览
    • 自定义主题
    • 色板
    • 自定义色板
  • 动画 Animation
    • 动画总览
    • 自定义动画
  • 扩展阅读
    • 事件
    • 渲染器
    • 坐标系
    • 下载图片
    • 使用 iconfont
    • 使用 3D
    • 项目打包
  • 版本特性
    • 新版本特性
    • 升级到 5.0
  • 常见问题
  • 参与贡献

参与贡献

上一篇
常见问题

Resources

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

要参与贡献,你需要了解 G6 的代码结构和开发流程。G6 的代码仓库地址是:https://github.com/antvis/G6

如果你想要修复一个 bug 或者增加一个新功能,你需要先 fork 一份代码到你的仓库,然后在你的仓库中进行修改,最后提交 PR 到 G6 的仓库。

项目结构

<root>
packages
g6 G6 核心实现
__tests__ 测试及开发环境
assets 测试静态资源
bugs Bug 修复测试用例
dataset 测试数据集
demos 开发示例
snapshots 测试截图
perf 性能测试用例
perf-report 性能测试报告
unit 测试用例
utils 测试工具函数
src
animations 动画执行器及内置动画
behaviors 内置交互
constants 常量及枚举值
elements 内置元素
combos 内置组合
edges 内置边
nodes 内置节点
shapes 复合图形
layouts 布局引用及封装
palettes 内置色板
plugins 内置插件
registry 注册模块
runtime Graph 及核心控制器
spec Specification 类型定义
themes 内置主题
transforms 内置数据转换
types 类型定义
utils 工具函数
exports.ts 导出项
preset.ts 预操作
vite.config.js 开发环境 Vite 配置
g6-extension-3d/src 3D 扩展
behaviors 3D 交互
elements 3D 元素
plugins 3D 插件
renderer.ts 3D 渲染器
g6-extension-react/src React 节点扩展
elements React 元素
graph React Graph 封装
site 官网及文档
docs 教程及 API
examples 图表示例
.dumirc.ts 配置文件

开发流程

  1. Fork 并拉取代码

在 Github 中 Fork G6 到你的仓库,并拉取到本地。

# 进入你的工作目录
cd /path/to/your/workspace
# 克隆 G6 代码
git clone [email protected]:[your username]/G6.git
  1. 安装依赖

注意

请验证你的本地环境是否符合要求:

  • Node.js 版本 >= 18
  • pnpm 版本 >= 8
# 进入 G6 代码目录
cd G6
# 安装依赖
pnpm install
  1. 启动开发环境
# 进入 G6 代码目录
cd ./packages/g6
# 启动开发环境
pnpm dev

此时,你可以在浏览器中访问 http://127.0.0.1:8080 查看 G6 的开发环境并预览开发示例。

  1. 开发新功能或修复 bug

切换到开发分支:

git checkout -b [branch name]

根据你的需求,修改代码并在本地测试。

  1. 编写测试用例

在 packages/g6/__tests__/unit 目录下编写测试用例,确保你的代码符合预期。

确保你的代码通过测试:

pnpm test
  1. 提交 PR
# 添加修改
git add .
# 提交修改
git commit -m "[commit type]: commit message"
# 推送到你的仓库
git push

在 Github 中提交 PR 到 G6 仓库。

测试与覆盖率

G6 使用 Jest 进行单元测试,测试用例位于 packages/g6/__tests__/unit 目录下。

我们要求所有的代码提交都需要通过测试,确保代码质量。

当前 PR 提交的覆盖率不建议低于当前代码库的覆盖率,且不得低于 90%。

更新测试截图

G6 扩展了 Jest 测试,提供了 toMatchSnapshot 断言用于生成以及对比快照。

如果当前可能修改影响了部分截图的生成,需要通过执行 pnpm test 检查是否有测试用例失败。

当发现测试失败的用例时,控制台会打印出失败的测试路径,以及基准截图和当前截图的路径信息。你可以按住 Ctrl 或 Command 键并点击路径,查看具体的测试用例或截图。

如果确认本次修改是正确的,那么请手动删除对应的基准截图,并重新生成截图:

重新生成全部截图:

  1. 删除 packages/g6/__tests__/unit/snapshots 目录下的所有文件
  2. 执行 pnpm test

重新生成单个截图:

  1. 删除 packages/g6/__tests__/snapshots 目录下对应的文件(unit目录下测试用例会在snapshots下生成对应的目录)
  2. 执行 npx jest __tests__/unit/xx/xxx.spec.ts

代码规范

G6 编码尊循以下规范:

  • eslint:recommended
  • @typescript-eslint/recommended
  • jsdoc/recommended-error

提交规范

G6 采用 Conventional Commits 规范,提交信息格式如下:

<type>[optional scope]: <description>

type 有以下几种:

  • feat: 新功能
  • fix: 修复 bug
  • docs: 文档更新
  • style: 代码格式(不影响代码运行的变动)
  • refactor: 重构
  • perf: 性能优化
  • test: 测试
  • build: 构建工具相关的变动
  • ci: CI 配置
  • chore: 其他无关紧要的变动
  • revert: 撤销

例如:

feat: add new feature
refactor(behavior): refactor drag-canvas behavior

请确保你的提交信息符合规范,并尽量使用英文描述,这样有助于我们更好地管理代码。

PR 规范

完成上述步骤后,你可以提交 PR 到 G6 仓库。请确保你的 PR 符合以下规范:

  • 一个 PR 只解决一个问题
  • PR 的标题简洁明了
  • PR 的描述清晰详细,涉及视图的变动请附上截图
  • PR 必需能够通过 CI 检查

代码 Review

PR 提交后,我们会对你的代码进行 Review。请耐心等待 Review 结果,如果有需要修改的地方,我们会在 PR 中提出。

发布流程

我们会定期发布新版本,如果你的 PR 是非紧急缺陷修复,我们会在下一个版本中发布。如果你的 PR 是紧急缺陷修复,我们会尽快发布新版本。

本项目通过 changeset 来管理版本发布,具体的发布流程如下:

  1. 完成相关的开发工作
  2. 从 v5 分支创建一个分支(任意分支名均可)
  3. 根目录执行 npm run version 命令,根据提示填写相关信息,会自动更新版本号
  4. 将变更提交到远程仓库
  5. 在 GitHub 上创建一个 PR,并添加 publish 标签,将该分支合并到 v5 分支
  6. 分支合并后,会自动触发 GitHub Actions,发布到 npm
  7. 发布后,需更新 Release note,在 packages/g6 目录下执行 pnpm tag
  8. 在新打开的 Github 链接填写 tag 信息,先选择前一个 tag, 然后选择当前 tag 后得到变更,确认没有问题后发布