性能強悍的 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/