G6：AntV 的圖可視化與圖分析

導讀

G6 是 AntV 旗下的一款專業級圖可視化引擎，它在高定製能力的基礎上，提供簡單、易用的接口以及一系列設計優雅的圖可視化解決方案，是阿里經濟體圖可視化與圖分析的基礎設施。今年 AntV 11.22 品牌日，咱們帶來了新的 G6 3.2.0 版本。該版本着重改進了開發體驗，增長了許多新元素和組件，並提供了更爲高級的佈局算法。

與此同時，咱們發佈一款基於 G6 引擎封裝的、開箱即用的圖可視化工具——Graphin，你只要對它進行簡單配置，就能夠迅速搭建起一個功能強大、樣式美觀的圖可視化分析應用。

G6，洞察關係數據

G6 名稱由來：G6 是螞蟻金服-AntV 旗下的圖可視化與圖分析引擎，G 來自於 Graphic、Graph ，意味着咱們要基於圖分析技術作圖可視化；6 來自於《六度分隔理論》，表達了咱們對關係數據、關係網絡的敬畏和着迷。

功能聚焦的圖可視化引擎

展現，做爲可視化最重要的基礎能力，其專業難點在於如何將複雜的關係數據以更低的視覺複雜度、更高的可讀性呈現給終端用戶。爲此，G6 提供圖的渲染、繪製、交互、動畫等可視化基礎能力。

• 豐富的內置元素（8 種基礎類型節點，6 種基礎類型邊 🆕及其變種）；
• 多樣的內置交互（10+ 種）；
• 🆕易用的輔助組件。

除了上述默認好用、配置自由的內置功能，元素、交互、佈局均容許用戶進行自定義。

豐富的內置元素。🆕菱形、三角形、星型、卡片型節點。🆕arc 型、自動彎折的折線型邊。

自定義元素及輔助展現及分析的組件——🆕邊綁定。下降視覺混亂，提升可讀性。

專業可靠的圖分析工具

可視化的另外一大需求是分析。圖/關係數據的複雜性致使了算法專業度高、複雜度高等難點。G6 爲支持業務中的流量分析、關係分析等需求提供了圖佈局、算法、分析組件等圖分析基礎能力：

• 🆕強大的內置佈局（10+ 種）—— 豐富的配置項，並容許用戶自定義佈局，切換爲所欲爲。提供 WebWorker 機制，再也不阻塞頁面；
• 便捷的分析組件 —— 🆕自由的配置，優秀的性能。

各佈局方式及參數的動態切換。

Graphin，小試牛刀

Graphin 取名意爲 Graph Insight（圖的分析洞察），是一個基於 G6 封裝的 React 組件庫。簡單，高效，開箱即用。它的 Logo 是一個石墨烯（Graphene），意爲蘊藏將來的潛力。

目前圖分析已經被普遍被用在金融反欺詐，公共安全，基礎設施監控，智慧醫療等領域。在這個過程當中，咱們須要一個強大的圖計算引擎，解決數據合規，挖掘問題。也須要相應的圖算法去解決圖的構建，分析問題。最後在前端，咱們須要一個圖可視化引擎，爲咱們提供可視化分析能力，發現潛在的價值。Graphin 就是在這樣的背景下誕生的，將這些圖關係數據進行可視化呈現，並對其進行分析探索。

Graphin 就是在這樣的背景下誕生的，基於 G6 的底層能力一方面屏蔽掉一些領域專業的概念，同時又封裝進去不少經常使用的圖分析功能，進一步下降圖可視化領域的專業門檻，將這些關係數據進行可視化分析與探索。Graphin 具備以下產品特性：

• 數據驅動：充分利用 React 框架特性，支持數據到圖的映射與變化；
• 自動佈局：內置豐富的佈局，支持佈局切換，知足不一樣場景下的佈局需求；
• 分析組件：內置 Toolbar，ContextMenu，MiniMap，Filter 等組件，組件化開發，支持自定義；
• 自定義樣式：內置節點與邊的樣式，支持用戶經過 JSON Schema 自定義；
• 基礎分析：支持節點擴散，尋找邊關係等基礎分析方法；
• 高級分析：開源後計劃新增時序分析（timebar），地理位置分析（map mode）等高級分析方法。

圖數據均爲Mock數據

數據驅動的 Graphin 可快速映射雜亂無序的關係數據到視圖上。例如，用戶能夠自由探索團伙、組織層次等關係。撤銷重作、拖拽圈選、分析組件、高級分析方法等輔助功能使 Graphin 更加易用。Graphin 但願經過開源共建的方式，吸引更多的人加入，深刻探索這一領域。 若是你對 Graphin 的使用感興趣，請閱讀《快速開始》。

結語

兩個點，一條邊，就是一幅圖，圖可視化就是這麼簡單； 點線能夠變化多端，姿態萬千，圖可視化又是這樣複雜； 平凡的點與線即可構成亦繁亦美的關係世界。

圖可視化，G6 一直在努力。更多功能，敬請期待，歡迎點亮 GitHub Star。

---

附

AntV 品牌日的發佈詳情

• 知源 · 致遠 - AntV 11.22 年度發佈
• 技術
  • 這張圖表「不簡單」- AntV 的圖表工廠
  • 洞察關係數據 - AntV 的圖可視化與圖分析
  • 突破專業門檻 - AntV 的地理可視化
  • 高效易用的 2D 渲染引擎 - G 4.0 升級
• 設計
  • 2019，優雅的 AntV 來了
  • 打造默認好用的企業級圖表-G2Plot
  • 始於探索 - G6 圖可視化設計
  • 從「心」出發之 L7 地圖可視化設計
• 產品
  • 圖表製做能夠很簡單 - 圖表魔方 ChartCube
  • 知源 · 致遠 - AntV 的那些人，那些事兒

AntV 項目連接

歡迎關注咱們的 GitHub 項目，點亮 star 瞭解咱們的實時動態，期待 pr：

• AntV 官網：https://antv.alipay.com
• G2：https://github.com/antvis/g2<br />G2 是一套基於可視化編碼的圖形語法，以數據驅動，具備高度的易用性和擴展性，用戶無需關注各類繁瑣的實現細節，一條語句便可構建出各類各樣的可交互的統計圖表。
• G2Plot：https://github.com/antvis/g2plot<br />G2Plot 的定位是開箱即用、易於配置、具備良好視覺和交互體驗的通用圖表庫。
• F2：https://github.com/antvis/f2<br />F2 是一個專一於移動，開箱即用的可視化解決方案，完美支持 H5 環境同時兼容多種環境（node, 小程序，weex）。完備的圖形語法理論，知足各類可視化需求。專業的移動設計指引爲你帶來最佳的移動端圖表體驗。
• G6：https://github.com/antvis/g6<br />G6 是 AntV 旗下的圖可視化與圖分析引擎_，_G 來自於 Graphic、Graph ，意味着咱們要基於圖分析技術作圖可視化；6 來自於《六度分隔理論》，表達了咱們對關係數據、關係網絡的敬畏和着迷。
• Graphin：https://github.com/antvis/graphin<br />Graphin 是一個基於 G6 封裝__的關係可視分析工具_ __，簡單，高效，開箱即用，_取自 Graph Insight，圖的分析洞察。
• L7：https://github.com/antvis/l7<br />_L7 是一個基於 WebGL 的開源__大規模地理空間數據可視分析開發框架。_L7 中的 L 表明 Location，7 表明世界七大洲，寓意能爲全球位置數據提供可視分析的能力。
• G：https://github.com/antvis/g<br />G 是 AntV 幾個產品共同的底層 2D 渲染引擎，高效易用，專一於圖形的渲染、拾取、事件以及動畫機制，給上層 G二、F二、G6 提供統一的渲染機制。
• ChartCube：https://chartcube.alipay.com<br />_ChartCube 是一個能夠快速完成圖表製做的在線工具，只須要三步就能夠建立出高品質的圖表。