AntV G6 是一款開源的圖可視化引擎律想，專注于圖可視化及圖分析領(lǐng)域。
歡迎關(guān)注和?star?我們的 GitHub：https://github.com/antvis/G6
官網(wǎng)：https://g6.antv.vision/zh/
2020 年 1 月 16 日匆瓜，新年代的 G6 3.3-beta 來了！這次未蝌，G6 主打性能提升與 TypeScript 化驮吱，一起來看看 G6 新特性吧！
??性能 upup
作為圖可視化框架萧吠，G6 一般具有數(shù)據(jù)量大左冬、圖元數(shù)量多、動(dòng)態(tài)更新頻繁的特點(diǎn)纸型，Canvas 渲染便成了 G6 最耗性能的痛點(diǎn)拇砰。
為解決這一問題，我們在 G6 3.3-beta?中全面升級(jí)了底層渲染引擎：使用局部渲染狰腌、自動(dòng)渲染除破、延遲渲染及自動(dòng)裁剪機(jī)制，替換了原先動(dòng)態(tài)更新圖上單個(gè)元素便需要全局重繪的機(jī)制琼腔。
這一改進(jìn)大大提升了交互體驗(yàn)皂岔，特別是在大數(shù)據(jù)下節(jié)點(diǎn)/邊的高亮、選中展姐、拖拽等交互。
在有 10000 個(gè)節(jié)點(diǎn)的圖上剖毯，拖拽交互時(shí)的性能對比圖如下圾笨。
測試環(huán)境：Chrome on MacBook Pro with 2.5 GHz Intel Core i5, 16 GB 2133 MHz LPDDR3
在該圖上對一個(gè)節(jié)點(diǎn)進(jìn)行拖拽，可以看到在 G6 3.2 及之前的版本中（左圖）究恤，拖拽十分卡頓俭令，被拖拽節(jié)點(diǎn)基本無法跟隨鼠標(biāo)，交互體驗(yàn)極差部宿。
升級(jí)后的 G6 3.3-beta?（右圖）雖然在如此大數(shù)據(jù)量下的拖拽稍有拖尾現(xiàn)象抄腔，但被拖拽節(jié)點(diǎn)能夠順暢跟隨鼠標(biāo)瓢湃。
下圖記錄了 G6 升級(jí)前后性能隨節(jié)點(diǎn)數(shù)量增加而變化的情況，藍(lán)色赫蛇、綠色折線分別代表了升級(jí)前后的性能折線绵患。
測試環(huán)境：Chrome on MacBook Pro with 2.5 GHz Intel Core i5, 16 GB 2133 MHz LPDDR3
上左圖展示了隨著圖上節(jié)點(diǎn)總數(shù)（每個(gè)節(jié)點(diǎn)仍然帶有一個(gè)文本落蝙，因此圖元數(shù)量是節(jié)點(diǎn)總數(shù)的兩倍）增加，拖拽單個(gè)節(jié)點(diǎn)時(shí)畫布的幀率變化暂幼。
在 7000 個(gè)節(jié)點(diǎn)的圖上筏勒，升級(jí)前的 G6 幀率已經(jīng)小于 2，基本無法正常交互粟誓；而升級(jí)后的 G6 在 17000 的圖上仍然有較高幀率奏寨。
上右圖展示了在拖拽單個(gè)節(jié)點(diǎn)時(shí)，節(jié)點(diǎn)總數(shù)與 CPU 占用率的關(guān)系鹰服。
G6 3.2 版本中當(dāng)節(jié)點(diǎn)數(shù)為 3000 時(shí)病瞳，CPU 占用率就達(dá)到 100% 了。而升級(jí)后的版本中悲酷，節(jié)點(diǎn)為 3000 時(shí)套菜，CPU 占用率不到 75%，當(dāng)節(jié)點(diǎn)數(shù)為 17000 時(shí)设易，CPU 占用率也沒有到 100%逗柴。
??擁抱?TypeScript
在 TypeScript 大行其道，逐漸成為前端開發(fā)首選的今天顿肺，G6 也不愿被時(shí)（大）代（家）拋棄戏溺。G6 3.3-beta?版本中，我們使用 TypeScript 完全重構(gòu)了所有代碼屠尊，完善的類型定義及錯(cuò)誤提示能夠極大地提升研發(fā)人員的開發(fā)效率旷祸。
??更自由的元素與布局配置
- 除了原先支持的節(jié)點(diǎn)關(guān)鍵圖形的樣式更新外，新版本支持了內(nèi)置元素上其他圖形的動(dòng)態(tài)增刪及樣式更新：
- 更自由穩(wěn)定的布局配置：
??更豐富的構(gòu)建產(chǎn)物
G6 3.3 版本中羡榴，我們提供多種構(gòu)建產(chǎn)物：
- es：支持 es5 的產(chǎn)物；
- lib：支持 commonjs 的產(chǎn)物运敢；
- dist：支持 UMD 的產(chǎn)物炕矮。
??測試覆蓋率? upup
本次升級(jí)么夫，我們進(jìn)行了較為全面的測試：
- 行覆蓋率 > 95%；
- 分支覆蓋率 > 87%
立足當(dāng)下
回顧剛剛過去的 2019肤视，G6 進(jìn)行了架構(gòu)的全面升級(jí)档痪，迎來了 全新的 G6 3.x。并從 3.0 一步一腳印地升級(jí)到了 3.3-beta邢滑。我們也真正明確了 G6 的定位：圖可視化引擎腐螟。
2019酗宋，也是 G6 更加開放的一年积仗。G6 團(tuán)隊(duì)從一個(gè)人的小作坊變成了 5 人+ 的工作小組；從 1-2 個(gè)核心開發(fā)者變成了 10+ 人貢獻(xiàn)代碼蜕猫；從社區(qū)隔離變成了有一個(gè)近 1000 人 的交流群寂曹。
G6 不再僅僅是一個(gè)開源代碼庫，它將會(huì)成為一個(gè)更加開放回右、更加包容和更加多元化的組織隆圆。
特別鳴謝
感謝所有 G6 的用戶，有你們的反饋和督促翔烁，G6 才能更好地發(fā)展下去渺氧；特別感謝為 G6 貢獻(xiàn)了代碼的各位貢獻(xiàn)者，正是有了你們的無私奉獻(xiàn)租漂，G6 才會(huì)更有信心持續(xù)地發(fā)展下去。
再次特別感謝對 G6 貢獻(xiàn)了代碼的各位貢獻(xiàn)者：
下面僅列舉了在 GitHub 上對 G6 3.x 的貢獻(xiàn)者用戶颊糜，排名不分順序哩治。
elaine1234????Shu-JI????huxiaoyu????zxc0328????Echo009????mage3k
Deturium????scaletimes????afc163????crystalwm????bzhangzju????hstarorg
vellengs????gaoli????lxfu????spengjie????EarlyH????zhengbigbig????Anderson-Liu
fanlinqiang????Cyrilszq????hujiulong
結(jié)語
G6 3.3-beta 版本的發(fā)布，預(yù)示了我們又邁出了新的一步衬鱼，但這也僅僅只是開始业筏。G6 3.3-beta 解決了困擾我們已有的性能問題，對 TS 開發(fā)者也更加友好鸟赫，可是依舊未能完全解決交互上的問題蒜胖。對于所有已知的交互和事件上的問題消别，我們也一直在探索各種解法。希望在 G6 3.3 正式版發(fā)布時(shí)台谢，能給大家一個(gè)滿意的答案寻狂。
AntV G6?是一款開源的圖可視化引擎，專注于圖可視化及圖分析領(lǐng)域朋沮。
歡迎關(guān)注和?star?我們的?GitHub：https://github.com/antvis/G6
官網(wǎng)：https://g6.antv.vision/zh/
