性能强悍的 TS 版 G6 给您拜年来了

AntV G6 是一款开源的图可视化引擎，专一于图可视化及图分析领域。欢迎关注和 star 咱们的 GitHub：github.com/antvis/G6 官网：g6.antv.vision/zh/前端

2020 年 1 月 16 日，新年代的 G6 3.3-beta 来了！此次，G6 主打性能提高与 TypeScript 化，一块儿来看看 G6 新特性吧！git

如何升级迁移？请看 TS G6 3.3 升级指南。github

🔥性能 upup

做为图可视化框架，G6 通常具备数据量大、图元数量多、动态更新频繁的特色，Canvas 渲染便成了 G6 最耗性能的痛点。markdown

为解决这一问题，咱们在 G6 3.3-beta 中全面升级了底层渲染引擎：使用局部渲染、自动渲染、延迟渲染及自动裁剪机制，替换了原先动态更新图上单个元素便须要全局重绘的机制。架构

这一改进大大提高了交互体验，特别是在大数据下节点/边的高亮、选中、拖拽等交互。框架

在有 10000 个节点的图上，拖拽交互时的性能对比图以下。oop

< G6 3.2	G6 3.3

拖拽卡顿，延迟严重	稍有拖尾，跟随顺滑

在该图上对一个节点进行拖拽，能够看到在 G6 3.2 及以前的版本中（左图），拖拽十分卡顿，被拖拽节点基本没法跟随鼠标，交互体验极差。升级后的 G6 3.3-beta （右图）虽然在如此大数据量下的拖拽稍有拖尾现象，但被拖拽节点可以顺畅跟随鼠标。布局

下图记录了 G6 升级先后性能随节点数量增长而变化的状况，蓝色、绿色折线分别表明了升级先后的性能折线。
性能

（左）节点总数与渲染帧率的关系；（右）节点总数与 CPU 使用率的关系。测试

上左图展现了随着图上节点总数（每一个节点仍然带有一个文本，所以图元数量是节点总数的两倍）增长，拖拽单个节点时画布的帧率变化。

在 7000 个节点的图上，升级前的 G6 帧率已经小于 2，基本没法正常交互；而升级后的 G6 在 17000 的图上仍然有较高帧率。

上右图展现了在拖拽单个节点时，节点总数与 CPU 占用率的关系。

G6 3.2 版本中当节点数为 3000 时，CPU 占用率就达到 100% 了。而升级后的版本中，节点为 3000 时，CPU 占用率不到 75%，当节点数为 17000 时，CPU 占用率也没有到 100%。

🔥拥抱 TypeScript

在 TypeScript 大行其道，逐渐成为前端开发首选的今天，G6 也不肯被时（大）代（家）抛弃。G6 3.3-beta 版本中，咱们使用 TypeScript 彻底重构了全部代码，完善的类型定义及错误提示可以极大地提高研发人员的开发效率。

🔥更自由的元素与布局配置

除了原先支持的节点关键图形的样式更新外，新版本支持了内置元素上其余图形的动态增删及样式更新：

动态增删 label、linkPoints、icon	动态更新卡片节点的副文本、增删 icon

更自由稳定的布局配置：

Grid 布局支持指定行列数	Radial 布局支持指定同层节点聚类排布	Dagre 布局支持自动计算折线控制点，修复节点顺序敏感问题

🔥更丰富的构建产物

G6 3.3 版本中，咱们提供多种构建产物：

es：支持 es5 的产物；
lib：支持 commonjs 的产物；
dist：支持 UMD 的产物。

🔥测试覆盖率 upup

本次升级，咱们进行了较为全面的测试：

行覆盖率 > 95%；
分支覆盖率 > 87%。

立足当下

回顾刚刚过去的 2019，G6 进行了架构的全面升级，迎来了全新的 G6 3.x。并从 3.0 一步一脚印地升级到了 3.3-beta。咱们也真正明确了 G6 的定位：图可视化引擎。

提高 Layout、组件、动画的地位，独立成机制，大大提高易用性和功能；针对分析场景增长了状态管理机制，在图分析场景下很是易用；移除了锚点和控制点机制。专一于图展现与分析，再也不重点关注重编辑场景。

2019，也是 G6 更加开放的一年。G6 团队从一我的的小做坊变成了 5 人+ 的工做小组；从 1-2 个核心开发者变成了 10+ 人贡献代码；从社区隔离变成了有一个近 1000 人的交流群。

G6 再也不仅仅是一个开源代码库，它将会成为一个更加开放、更加包容和更加多元化的组织。

特别鸣谢

感谢全部 G6 的用户，有大家的反馈和督促，G6 才能更好地发展下去；特别感谢为 G6 贡献了代码的各位贡献者，正是有了大家的无私奉献，G6 才会更有信心持续地发展下去。

再次特别感谢对 G6 贡献了代码的各位贡献者：

下面仅列举了在 GitHub 上对 G6 3.x 的贡献者用户，排名不分顺序。

elaine1234   Shu-JI huxiaoyu zxc0328 Echo009 mage3k
Deturium scaletimes afc163 crystalwm bzhangzju hstarorg
vellengs gaoli lxfu spengjie EarlyH zhengbigbig Anderson-Liu
fanlinqiang Cyrilszq hujiulong。

结语

G6 3.3-beta 版本的发布，预示了咱们又迈出了新的一步，但这也仅仅只是开始。G6 3.3-beta 解决了困扰咱们已有的性能问题，对 TS 开发者也更加友好，但是依旧未能彻底解决交互上的问题。对于全部已知的交互和事件上的问题，咱们也一直在探索各类解法。但愿在 G6 3.3 正式版发布时，能给你们一个满意的答案。

AntV G6 是一款开源的图可视化引擎，专一于图可视化及图分析领域。欢迎关注和 star 咱们的 GitHub：github.com/antvis/G6 官网：g6.antv.vision/zh/