🎉 AntV Graphin 2.0 來啦～

還記得去年 AntV 11.22 開源日 發佈的圖可視分析解決方案白皮書嗎？方案都肯定了，就差一個程序員來實現來，這不，Graphin2.0 它來啦～ Graphin 2.0 版本是繼 1.6.4 版本後的一個大版本升級，它將爲你們帶來三個主要變化：開箱即用的功能，全新架構升級，集成解決方案，讓咱們快來看一下吧～

01.開箱即用的功能

1.1 🎨  高顏值元素，規範的樣式配置。

Graphin 對於圖元素的視覺映射作了規範化處理。一個 Graphin 內置節點包含：容器，標籤，光暈，圖標，徽標 5 部分，每一部分都可以經過數據驅動。內置的邊包含：路徑，標籤，光暈 3 部分，同時針對業務中經常使用的標籤背景，自環，多邊，虛線等，也有相應的數據樣式配置。在線體驗

1.2 📦  自動佈局，輕鬆應對複雜場景

Graphin 內置 10 款網圖佈局，4 款樹圖佈局，知足你對於不一樣數據類型，不一樣分析場景的佈局需求。針對複雜業務場景下的佈局切換，動態佈局，子圖佈局等，均能經過數據驅動佈局，輕鬆實現。在線體驗

1.3 📝  細膩交互，輕鬆自定義

Graphin 提供了 13 種交互組件。包括畫布的縮放，平移，圈選，拉索，自動 Resize，也包括元素的拖拽，選中，懸停，高亮，展開收起等，知足你對於不一樣分析場景的交互需求。在線體驗

1.4 🚀  豐富組件，源於業務沉澱

目前 Graphin 提供了 7 種分析組件：分別爲右鍵菜單，提示框，小地圖，工具欄，魚眼放大鏡，輪廓，圖例。將來將提供 26+ 的分析組件。在線體驗

02.全新架構升級

看完了功能特性，咱們接着介紹 Graphin 2.0 的重要變化：架構升級。過去一年，Graphin 支持了內部和外部的不少重要圖分析產品，經過開發者反饋，Graphin 架構存在首要矛盾是與底層圖可視化引擎 G6 的協同：元素樣式，佈局，交互，自定義機制，都存在很大差異，經常使用戶感到困惑。所以 2.0 做爲一個大版本就是去解決這個問題。

2.1 解決一致性問題

Graphin 最基本的一個要求是做爲 G6 上層的一個 React 封裝庫。而後由於歷史緣由，Graphin@1.0 剛開始作的時候，G6@3.0也剛剛起步，業務實踐中須要的交互組件，佈局能力，圖算法，標準元素樣式，這些 Graphin 都先在組件層作了，所以產生使用機制不一致的問題。
Graphin2.0 在使用方式上，支持 G6 的參數透傳，這意味着開發者很容易將原生的 G6 開發項目遷移到 Graphin 中。在註冊機制上，Graphin 放棄了原先的自定義機制，徹底依靠 G6 的原生註冊方式，這讓開發者更容易理解，不帶來額外學習成本。

2.2 完善數據驅動

數據驅動 是 React 組 件的重要特性，Graphin 也不例外，甚至是以此產生強大能力。好比咱們在畫布上添加或者刪除節點，一般都會考慮不少問題，好比新增多個節點應該放在什麼位置？會不會對原先的佈局產生影響？而使用 Graphin 時，咱們就不須要考慮這麼多，只須要告訴 Graphin 你須要渲染的數據是什麼就能夠。增長節點不用使用 graph.add(node)，刪除節點也不用調用 graph.remove(node)，一切都是改變數據 props.data 便可。
在 2.0 中，咱們對佈局的數據驅動作了優化，能夠根據數據變化，輕鬆實現子圖佈局，動態佈局，佈局切換，預設佈局。對元素的樣式和狀態，也作了優化，支持初始化狀態，臨時狀態，元素狀態更新等。

2.3 性能優化

Graphin2.0 升級到 G6 的最新版本，同時在內部作了計算優化，提升了渲染性能。在包體積方面，也將內置的字體資源單獨拆包爲 @antv/graphin-icons ，方便用戶按需引入。

針對以前 issue 提到的 400 節點卡頓問題，2.0 目前 FPS 接近 60，比 1.x 版本提升 1 倍

2.4 開放的組件機制

Graphin2.0，組件層最大的變化是不集成任何 UI 庫。解決以前 1.x 版本有 material-ui，fusionUI 用戶的反饋的 UI 自定義問題。同時 Graphin2.0 提供更好的組件自定義機制。好比 ContextMenu，用戶其實期待的是，Graphin 是否能夠告訴我，這個右鍵點擊發生的節點數據，座標位置。至於 UI 渲染，徹底交給用戶去作就能夠了。其本質是將複雜邏輯內置，自定義的 UI 渲染開放。以下圖自定義組件，能夠在線體驗

2.5 更好的開發體驗

2.0 文檔採用優秀的 dumi 進行網站搭建，用戶能夠在文檔中直接看到源碼渲染的組件示例。同時結合 Typescript，有更好的開發體驗。

03. 解決方案集成

除了基礎能力下沉到 G6，作「薄」。Graphin 2.0 版本最須要回答的是「如何作好一個圖分析應用」，所以《解決方案白皮書》是咱們的一個嘗試，咱們試圖從用戶的需求入手，一步步拆分需求，彙總造成技術方案。這一部分也是 Graphin 將來須要重點發力的地方。

3.1 關係擴散

在金融風控領域，有針對個案進行分析探查， 在知識圖譜應用領域，須要對知識進行推理。關係擴散是很是重要的一個分析方法，其共同特色：關係擴散的過程當中，節點佈局位置可預測，擴散過程穩定可持續，擴散的結果可回溯。

使用 Graphin，能夠輕鬆達到業務指望效果，在線體驗

3.2 大圖分析

在圖數據庫應用產品中，原始的關係數據量每每很是大，這個查詢出來的數據的可讀性帶來很大的挑戰。除了服務層作數據過濾，前端也能夠經過一些聚類算法進行節點的聚合，再經過數據下鑽的方式，下鑽動態探索。詳細方案，可在線查看

04.誰在使用 Graphin

Graphin2.0 是嚴格意義上的第一次正式對外發聲，所以咱們須要向用戶介紹，誰在使用 Graphin，以此幫助人們進行技術選型。
國外商業公司有 Cylynx 公司，利用 Graphin 開箱即用的功能，快速搭建他們的  Motif  圖分析平臺。利用風險監控來打擊財務欺詐，經過跨鏈分析瞭解虛擬資產鏈上的活動。他們也參與 Graphin2.0 的官網建設。

國內商業公司有 360 將來研究院，利用 Graphin 分析固件安全性問題，建設網絡安全可視化。

更多的用戶來自 後端開發，數據開發，算法開發同窗。Graphin 提供開箱即用的能力，可以快速幫助他們進行關係數據分析。咱們在 github 也開了一個 issue：who uses graphin ，來幫助更多後來者進行技術選型與產品案例交流。

05.總結

咱們所處的 世界是一個互聯共通的世界，目前圖分析已經被普遍被用在金融反欺詐，公共安全，基礎設施監控，智慧醫療等領域。Graphin 但願可以在關係數據的探索上找到一條道路，可以幫助開發者提效，爲業務賦能，感興趣的同窗，能夠一塊兒交流共建。最後附上連接，若是對你的業務有幫助，還請幫忙點個 star 哦

• AntV Graphin Github：https://github.com/antvis/Graphin
• AntV Graphin 官方站點：https://graphin.antv.vision/
• AntV G6 Github：https://github.com/antvis/G6
• AntV G6 官方站點： https://g6.antv.vision/zh/
• 優秀的文檔工具 dumi： https://github.com/umijs/dumi