今天聊：如何深度探索圖可視化與分析能力

前端早早聊大會，與掘金聯合舉辦。加 codingdreamer 進大會技術羣，贏在新的起跑線。前端

第二十九屆|前端數據可視化專場，高強度一次性洞察可視化的前端玩法，7-17 全天直播，9 位講師 9 個小時的知識轟炸(阿里雲/螞蟻/奇安信/小米等)，報名上車👉 )：web

正文以下

本文是第十二屆 - 前端早早聊可視化專場，也是早早聊第 80 場，來自螞蟻金服 - 十吾山果的分享的講稿剪輯，跟進錄播和加可視化羣加微信 zaoeva。數據庫

1、目錄

你們好我是十吾，我今天和山果同窗一塊兒和你們探索圖分析與圖可視化這個領域的一些知識和業務，我會從前 3 個部分對爲你們進行分享，後 3 個部分是山果同窗和你們分享。編程

我是來自體驗技術部的前端工程師，我也是 AntV G6 的核心開發者，G6 是咱們部分研發的一個開源圖可視化與分析引擎，是一個前端的開源類庫。首先，咱們會先一塊兒瞭解一下圖可視化的簡史，而後重點介紹一下在學術上面常見的一些圖可視化的技術，最後你們再一塊兒概覽 AntV G6 的一些技術和願景。安全

2、圖可視化簡史

咱們從這個字面意思來看，可能會認爲中文的圖會表明圖像、圖畫，可是事實上咱們在這個領域來看，它不是指這樣的一種圖像或圖畫，也不是指咱們視覺上所看到的這種節點和邊的這種表達形式。微信

事實上它是指一種數據結構，表明的是實體和關係的集合。實體就是咱們常說的節點，關係就是咱們常說的邊。關係就是指實體之間的關係，在咱們離散數學中可能會學習到的一個概念。markdown

什麼是圖可視化

圖可視化就是把圖數據結構或者能夠說是關係數據，直觀地展現給終端用戶的一種手段，它可以輔助用戶去分析複雜的關係數據。網絡

圖可視化它大體能夠分爲 3 大類：弧線圖、鄰接矩陣、和我們最爲常見的點線圖。可能鄰接矩陣不是很是直觀，鄰接矩陣的每一行每一列都會表明一個節點，也就是實體。若是這兩個實體或者說這兩個節點之間有關係，則相應的格子上就會被標記，而格子顏色或者是標記顏色的深淺，表明了這兩個實體之間關係的權重或者是類別。前端工程師

除了這基礎的 3 種分類之外，如今已經有了很是多的擴展。好比說咱們常見的這種圖（上圖左下角），其實它就是弧線圖，把它的座標系變成了極座標系，就能夠成爲這種環形的弧線圖。點線圖（上圖右下角）也有不少的擴展，有些技術會把它繪製成這種輻射狀的結構。

圖之源起

圖在公元前 1400~1366 年就已經被使用在一種叫 morris 的遊戲當中，可是直到 3000 年後，咱們熟知的歐拉纔在他的哥尼斯堡七橋問題中使用了圖的思想來解決路徑追溯的問題。這個問題大體是，有一條河把大陸分割成了兩岸和兩個小島，且河上有 7 座橋。如何才能不重複地、一次性地走完這 7 座橋，回到原出發地。

在這個問題中，歐拉實際上並無把這個圖繪製成咱們如今的圖可視化的形式，可是他使用了圖的思想來解決問題，直到 100 多年後，數學家 Ball 在他的數學書中，才把歐拉的靈魂畫手畫出的這種圖抽象表達成了比較接近咱們如今的點線圖這種表達形式。

3、重點技術概覽

用戶任務驅動

用戶驅動是指以終端用戶的探索交互感知任務爲導向來進行可視化的設計和實現。爲何要這樣作？由於可視化是面向和服務終端用戶的，輔助用戶來理解數據。一個好的可視化應該可以讓用戶便捷的獲取他們想要的信息，所以咱們必須是以用戶在探索時所持的任務來指導咱們最終的設計。

通常來講咱們能夠把用戶在圖上的任務分爲基礎圖任務和高級別圖任務。基礎任務好比說基於拓撲結構的任務，舉些例子，找到一個節點的鄰居節點，也就是說找到一我的，若這個圖表明是一個社交網絡，可能會找到一我的的直接朋友；找到某個節點到某個節點最短路徑小於 n 的節點；或是找到一些節點的共同鄰居；找到兩個節點之間的最短路徑…… 這些都是用戶從圖結構上可能會探索的一些任務，也能夠套到咱們業務中的某些任務當中去，後面我會簡單介紹一下咱們在業務中出現的一些任務。

還有一些基於屬性的任務就很是的好理解了，好比找到具備某些屬性的節點或邊瀏覽任務多是指用戶但願跟隨從 a 節點到 b 節點的一條路徑，而後再深度探索這條路徑上的其餘信息，回溯撤銷就是在交互過程當中但願回撤到上一步的結果，進行往復的這種探索。

高級別的任務，好比說讓用戶去對比多個圖來找到它們之間的異同點，假如圖數據中有錯誤的信息，那麼如何才能讓用戶快速的定位和發現這些數據中的冗餘、錯誤、重複的節點，還有讓用戶觀察圖是如何隨着時間改變的，這種任務在時序圖的可視化中很是常見。

減小視覺混亂

第二個重點的技術是如何減小視覺混亂，視覺混亂在圖可視化中是一個很是大的問題。在目前咱們業務數據逐漸龐大的今天，視覺混亂也成爲了一個讓人很是頭疼的問題。它是指在過量的元素或者它們不合理的表達方式或組織方式，致使用戶在看這個圖時，在視覺上感到很是混亂，且在此圖上執行某些探索任務時效率低下。

這個問題在大規模圖上特別嚴重，甚至某些數據有可能會出現節點數都超過屏幕像素點的狀況。一個好的可視化應該有儘可能少的視覺混亂。在學界有一些理論和技術來儘可能減小視覺混亂。咱們能夠在可視化設計的時候考慮這些點來進行一些優化。

首先咱們從節點上來看，在超大規模的圖上，建議要進行節點的過濾和下采樣，提取出一個具備表明性的網絡，這樣用戶才能更清晰地看清整個圖。在大規模圖很是混亂的狀況下，信息傳遞的效率是很是低下的，咱們不如用一個信息量比較少，但可以快速直觀傳遞信息的這種手段來展現。

另一個很是重要的技術就是合理的圖佈局。假如說咱們在一個比較大甚至不用太大的圖上，咱們使用一種隨機的佈局來分佈這些節點位置的話，可能會出現一些很是長的邊或者邊之間出現很是多的交錯，節點之間出現很是多的重疊，這種是強烈的干擾了用戶的觀察，使用一些合理的佈局算法，可以把一些關係比較近或根據節點中的某些信息來排布節點在屏幕中的位置，用戶能更清晰地看清節點的分佈狀況以及節點之間的關係。

還有一些其餘的技術，好比把區域分組或者是在佈局時考慮一些聚類信息，讓聚類的分佈更清晰，層次提取能夠根據節點它的某些特性來對節點進行劃分歸類，把這一類的節點使用一個超級節點來代替。用戶在初次探索大規模圖時，能夠先給出一個抽取過層次的、節點較少的圖，而後再讓用戶進行下鑽式的探索。

在邊的處理上面最重要的實際上是減小邊與邊之間的交錯以及邊與節點之間的重疊。那麼在節點固位置固定的時候，咱們可使用一些現有的策略和算法去繞過這些節點，讓邊可以有一些彎折，還有一些技術使用這種平滑的曲線表達邊，做爲一種流狀邊來聚合，達到這種更加清晰的效果。

邊綁定技術就是指把邊根據趨勢或者是邊數據上的特性進行聚類，把它們「綁「在一塊，就像扎頭髮同樣，咱們把一個比較混亂的頭髮給紮成一綹一綹的，這樣能更清晰地看清這個圖的總體趨勢和骨架。

還有一些技術可能會在一個邊很是密集的圖上放置一個小的這樣一個圓形窗口，而後這個窗口就能夠根據用戶探索的任務去設置一些過濾的方式。好比，過濾穿越這個小視窗的邊，只保留那些有一個端點或者兩個端點都在小視窗內的邊來減小小窗口內的視覺混亂。

EdgeLens 是指一種容許用戶在比較混亂的局部把邊進行必定的形變，而後查看邊下面的，被遮擋的部分。

如今來看一下咱們一些業務中的例子，也是咱們經常會遇到的一些典型的例子。在這個業務中每一個節點表明了一我的，而後他探索的鏈路是：先找到一我的，而後以這我的爲出發點去查看這我的的一度關係和二度關係。若是使用一個隨機的佈局，或者是咱們常見的這種力導向佈局，可能很難知足用戶去探索一度關係二度關係這樣的一個任務，由於邊太過複雜，它的節點就會被排布的比較混亂，這樣不只不能知足用戶的探索任務，更是形成了很是嚴重的視覺混亂。

這種狀況下，咱們根據他的這樣一個探索任務去使用合理的佈局，好比這樣的一個 radial 佈局，它把藍色的出發點放在同心圓的中心，而後它的一度關係放在第一圈，二度關係放在第二圈，這樣可以更方便用戶區分哪些是它的一度關係節點，哪些是它的二度關係節點。用戶還能夠在這個圖上再進行子圖的擴展，這就是根據用戶的探索任務去設計一個使用一個合理的佈局，也可以大大減小視覺的混亂。

在視覺混亂方面，最爲常見的就是這種 label 很是密集、相互遮擋的狀況，這種狀況下，咱們是建議在初始的時候能夠不顯示文本或者是進行篩選或採樣顯示少許的文本。在用戶交互過程當中，好比說 hover 節點或邊時，再顯示文本。若是用戶要求第一次瀏覽時，必需要把全部的 label 都展現出來，咱們就建議在這個 label 後面放置一個等大的白色背景框，這樣就能大大減小 label 之間相互重疊致使看不清的狀況，還有另外一種減小視覺混亂的策略，讓用戶控制篩選，讓他們可以有更多的探索的空間。

佈局

佈局其實是圖可視化中一個很是基礎、重要的部分。一個好的可視化，必須是在節點有合理的佈局的狀況下，才能高效的傳遞信息。佈局就是指根據數據的一些特性，節點之間的關係，邊或者是聚類信息等來計算節點在畫圖上的位置的這些算法。

咱們最爲常見的可能就是這種力導向的佈局算法，但實際上如今已經有很是多其餘的佈局的方式，好比說經過優化目標方程的形式，或者是根據某些策略來一步一步的生成圖，還有一些是要求必需要以規整的形狀展現圖（畫成一個環形或者這種放射形）。

那麼如何選擇一個合適的佈局呢，前面有說到咱們在選擇佈局的時候，可能要考慮到用戶的任務或者是這個數據的特色，通常來講咱們會從 4 個方面進行考慮。

第一個是數據結構。有一種圖比較特殊，它就是樹。樹圖通常是指一個節點有不少的孩子節點，且每一個孩子節點必須只有這一個父親節點，也就是說不存在回溯邊，咱們稱這樣的圖結構爲樹結構，其餘的圖結構就是通常的圖結構。

在數據量上咱們能夠分爲大規模小規模數據。

分析目的與咱們前面提到的和探索任務、圖任務比較相近的一種考慮維度。好比說想看聚類、看想看概覽信息、想看一個關注點及其鄰居。

視覺上可能也會有些要求，好比說是但願節點規則的分佈仍是比較緊湊的分佈，仍是我但願節點之間不要出現重疊。假如是樹結構的話，咱們就推薦使用這種好比說腦圖或者是緊湊樹的佈局，可以把圖的層次信息更加清晰的展現出來。離散的通常圖是指在圖上節點數量相對比較多，可是他們之間的邊數比較少，就是他們的關聯比較少的狀況，通常會使用更規整的形式來展現，就能夠把它繪製成一個環形或者是格子形。密集的數據就可使用其餘的方式，就是邊比較多的狀況，使用這種規整的 grid 或者 circular 的形式會致使很是多穿越節點之間的邊。

小規模圖上，很是建議用力導佈局，由於力導向佈局模擬了物理系統，節點之間存在引力和斥力，在迭代過程當中，終端用戶比較容易理解這個圖是如何生成的。但力導佈局在大規模圖上很是不合適，由於它的效率是比較低。此時，咱們推薦用一些有必定預計算的方法，如 MDS 是一種高緯數據降維方法，在佈局以前，它須要一個預計算：計算圖的最短路徑矩陣，佈局階段的速度比較快。

分析目的方面，若是想看聚類，能夠用這種名爲 fruchterman 或者其餘的相似算法，在佈局時這些算法可以考慮聚類的信息。若是想看關注點，剛剛提到的 radial 的佈局很是合適，它以一個關注點爲中心，按照其餘節點到這個節點的維度數，也就是最短路徑的長度來排布它們在同心圓上的位置。

咱們在作圖可視化設計時，必需要根據各類因素選擇一個合適的佈局算法，才能更好的傳遞圖的信息。

交互

最後，交互技術上，無論怎樣設計交互，最終目的都脫離不了這幾種：選擇、探索、重配置、映射（指節點顏色或者節點的某些視覺屬性映射到它的某些數據上）、概覽、過濾、鏈接。好比下面這幾個圖，左圖在作一些映射，中間圖是在作從新佈局，它可以快速的切換佈局，讓用戶從不一樣的視角來觀察圖。右圖從一個節點開始進行更多下鑽式的探索，展開或高亮關注節點。

實現這些交互的手段其實不外乎這幾種，第一個是平移和縮放，這是最多見的探索方式，但它存在一個問題：在縮放過程當中，上下文可能會超出視口。這時，可使用帶有一個 minimap，也就是縮略圖做爲一個導覽，來輔助進行上下文的觀察或者是直接在一個全圖上面放置一個像放大鏡同樣的效果視窗。

有些人但願在放縮過程當中不失去上下文，關注中心和上下文之間關係，因而，有人提出了這種魚眼的效果，把關注中心放大，上下文被壓縮，在觀察整個圖的過程當中，不會丟失上下文和關注中心的鏈接關係。

過濾就是前面有提到的一些濾鏡，可以把一些複雜的部分進行視覺混亂的下降。

在交互過程當中配以一些動畫，就能更好的保證可視化的整個設計會更加流暢，特別是在動態圖或者是時序圖上面使用動畫可以很是大地減小視覺混亂和空間佔用。

4、AntV G6

前面咱們提到了不少圖可視化的技術，在有這麼多學術輸入的前提下，咱們還有不少工業上業務的輸入，造就了開源的圖可視化與分析引擎 G6，它專一於關係數據的展現和分析。能夠說熟悉了 G6 後，它能夠幫助用戶去隨心所欲地展現和分析圖。這裏展現的圖都是經過 G6 實現的，咱們來大體看一下 G6 如今有哪些功能。

完善的可視化機制

最基礎的繪製上，G6 有很是豐富的內置的元素，包括節點、邊、箭頭，各類各樣內置的元素，可以知足用戶初步展現需求的內容。還有節點分組機制，容許用戶去作一些節點的歸類和操做。這些全部的內置元素都是支持自由的擴展的，好比把一個節點繪製成一個統計圖表的形式，或者是一個卡片的形式，這就是 G6 自由的機制。

豐富的分析功能力

在分析功能上面，如今已經有很是豐富的佈局算法，樹圖佈局有 5 種以及很是多的擴展，而通常圖有 10+ 種，也有不少的擴展，而且 G6 的佈局機制也很是完善，包括佈局間切換、子圖佈局、數據切換等。

算法上面，咱們逐步完善了各類經常使用的圖算法，幫助用戶更好地分析圖數據。交互上面咱們內置了不少經常使用常見的，咱們業務中遇到複雜的交互，也提供內置的基礎工具欄，減小業務上面對相似圖分析產品的重複開發。

插件上面有分析插件來輔助用戶分析。好比上文提到的縮略圖、節點上的提示氣泡、節點菜單。前文涉及的邊綁定算法也內置在了 G6 當中，大大減小邊的視覺混亂。固然，這些東西咱們仍是容許用戶自由地擴展，支持自定義佈局、自定義交互，從而實現一些目前內置還不能知足他們一些複雜的需求。

在性能上面咱們也有很是多的嘗試和努力。渲染性能上，如今已經支持局部渲染，可以在大規模較大規模的圖上快速局部渲染和局部交互。算法性能上，咱們如今已經支持了佈局的 Web Worker，保證在整個應用當中圖的計算不會阻塞頁面。另外，立刻就要發佈支持 GPU 計算的圖佈局，使用並行的算法可以大大提高大規模圖佈局的效率。

如今咱們已經在業務中有了不少的落地和應用。螞蟻的圖業務呈爆發的階段，咱們如今有很是多的業務輸入，固然也歡迎小夥伴們有更多給咱們的輸入，讓咱們能更好的成長。左圖展現了一個關係圖的應用，上圖是一個流量分析的應用，還有不少如右圖的業務會對節點進行深刻的定製，從而展現更豐富的信息，在這種有時間軸的狀況下，對時序數據進行可視化。

5、深刻探索圖分析與圖可視化

你們好，我是螞蟻大數據部的山果，剛纔十吾同窗給你們介紹了，你們應該能夠很清楚的看到有很是強的學術背景，以及講咱們怎麼樣去作 AntV 這樣一個圖分析的引擎，我會承接它上面講的三個內容，接着去講後面三個。

先講一下咱們如今整個圖分析與圖可視化整個的一個行業現狀，基本上你能夠看到它是挑戰與機遇並存。在第 5 部分我會去講一下咱們整個圖技術它所落地一個業務土壤，也就是它的應用領域是哪些。最後我會着重去講一下 AntV 推出了一款基於圖分析與圖可視化的一個解決方案 Graphin，我本人也是 Graphin 的一個開發者。

行業現狀

咱們如今看到這張圖是 2019 年 Gartner 的一個技術新興曲線的趨勢圖，在這個圖裏面咱們發現有兩個 Graph，第一個 Graph 是知識圖譜（Knowledge Graphs），第二個 Graph，它是一個圖分析（Graph Analytics），而第二個Graph 就是圖分析恰好很是吻合咱們此次的一個主題，可是你能夠看到它在象限裏面，它是處於預期膨脹，而後另一個交界處它屬於一個理想破滅，也就是說圖分析他如今正處於一個預期膨脹和理想破滅的一個階段，爲何會出現這種狀況呢？

這個問題得從咱們回顧整個互聯網發展的 60 年能夠看到，在互聯網整個發展 60 年中，每隔 10 年都會有一個比較表明性的技術：

從好比說 60 年到 70 年，咱們互聯網有一些基礎技術，技術的一個開始興起；
到 70~80 年咱們會發現像 TCP/IP 這樣基礎協議出來；
80~90 年，咱們的一些技術應用像電子郵件；
90~00 年基本上都屬於 Web1.0 階段，咱們常見的像一些門戶，搜索門戶，包括像一些簡單的 BBS，校園內 BBS 都已經出來了；
01 年到 10 年，這 10 年其實是 Web2.0 的一個高速發展階段，這裏面表明的技術就是在 05 年出現的 Ajax 技術，它實現服務端和客戶端雙向的通訊，因此說這個時候像一些大型的網站，像淘寶這些網站都已經興起了。

到 10 年以後，這 10 年你會發現是移動互聯網高速發展的十年，其實它已經把咱們生活的衣食住行都給囊括進來了。這條曲線能看出什麼一個東西呢？咱們會發如今曲線的右邊其實是咱們的網絡社會，咱們的網絡社會在不斷的擴大，一樣它也在擠佔着咱們現實的社會，由於每一次技術的發展都是對咱們現實社會的一個深度的刻畫。

好比說我這裏面好比說 Web2.0 階段：

社交需求會被經過 QQ、淘寶這些給取代掉，包括移動互聯網咱們是最有體感的；
衣食住行，現實生活中的衣食住行都已經被滴滴、美團，包括像淘寶這樣的一些應用，已經慢慢在現實生活中和網絡社會中均可以完成這樣的一些需求。

因此這樣一張圖咱們再推測一下，那 20 年以後其實會迎來一個智能物聯時代，它會對咱們的現實社會進行進一步的刻畫，而咱們的現實社會自己就是一個充滿關係的社會，無時無刻不在產生着關於關係數據，咱們是但願經過現實社會中產生數據去構建網絡社會，網絡社會中咱們經過一些數據的分析可以產生一些關係的洞見，從而去治理咱們的社會。

這裏面剛纔講的是機遇，那難點固然有了，其實就牽扯到你整個關係數據的採集、存儲、計算，之前來說是一個很是困難的，可是隨着 20 年以後，你會發現咱們在這個技術上有一個很大的發展，像採集的咱們如今有剛纔第一個其歌分享的是菜鳥倉儲，你會發現他們的採集用上了 IOT 設備，將來隨着 5G 的商業化，其實咱們的傳輸可能就會用到 5G 的技術了，如今圖計算和圖存儲能力都已經大大提高了，這其實爲咱們提供了便利。

在治理方面你會發現，當咱們把這些關於數據進行採集存儲以後，咱們怎麼去應用，一樣會碰到不少難點，第一個難點就是合規問題，我發現 a 和 b 之間，他們倆之間這個關係，我利用他們倆這個關係能不能去給他作一些搜索和推薦呢，事實上這樣一種行爲實際上會存在一些法律的合規風險，那怎麼去讓整個數據可以隱私安全獲得保護？

其實這裏面也有不少的行業正在研究，好比說像共享智能去解決數據合規問題，包括咱們怎麼去分析一個圖，這裏面核心的就是圖分析技術，包括咱們怎麼樣去把這些關係應用到咱們生活的方方面面，因此這張圖就反映了說咱們整個行業如今是一個機遇與挑戰並存的時候，其實反饋到咱們的技術和市場上，你會發現技術與市場已經開始行動了。

這張圖是 2020 年一個圖技術的大圖，這個圖上分了不少模塊，會發現 Graph Database（圖數據庫），還有像圖計算引擎，還有一些圖可視化，這三個其實是整個圖技術的核心能力。圖數據庫在最底層提供存儲計算而提供存儲能力，圖處理引擎，它其實是在中間層會把海量的圖關係數據可以給它進行圖的裁剪加工等等，最後上層的 Graph Visual Analysis 這個東西它就是圖的分析，它能夠基於這些數據去作一些分析和洞察。

而下面這 4 個它恰好是圖技術所表明應用領域，它每個好比說像知識圖譜領域，它其實有好多好多新的商業化的產品已經出來了，還有像反欺詐，社交網絡分析，還有網絡安全等等，這是 4 個在這張大圖裏面已經有了很是普遍的領域。

應用領域

上圖是落地的場景，除了你能夠看到如今應用領域中前 4 個是剛纔這個圖中全部的，其實除了前 4 個以外，咱們還有像監管合規，還有像我的安全守護，好比說 Health care 等等這些東西很是多，這裏面你能夠看到底下都是一些比較經典的表明圖，實際上如今在不少行業，好比說像咱們作了不少業務，包括行業內已經有不少公司有一些比較成熟的產品，由於合規問題咱們就不放出來，咱們放一些簡圖，你們能夠感覺到，好比上面的知識圖譜，你能夠看到它中間是一個巴黎這樣一個塔，它經過一步之推理可以作一個什麼事情，咱們如今不少有 AI 問答，實際上背後都是一套知識圖譜的能力。

基於這樣一個應用領域，咱們會發現它整個製做的時候，整個核心流程仍是一樣的，也是剛纔提到的三種技術，第一種就是圖數據庫技術，它會把整個的數據存儲起來，結構化裝載，最後到一個存儲。一樣存儲完以後，咱們會對這些圖的數據進行一個處理，處理這裏面還會針對有些圖的數據會進行個案的分析，最後會到達一個可視化展現和應用的階段。在這個裏面前端同窗就會遇到很大的挑戰，就是說你從一個圖的 Case Study 怎麼到可視化，這裏面一共有三個痛點問題，第一個就是我拿到是一堆圖的數據，並且這個圖的數據每每是很是巨大，它跟統計圖表數據還不太同樣，它的規模每每會很是巨大，這麼一串數據你怎麼去看，怎麼去把它很好的可視化出來。第二就是有了這些數據以後，你怎麼去理解這些數據？理解完以後你能不能從這數據中發現一些分析洞察，因此說這是我總結了三個痛點可看、可理解和可分析。

咱們把剛纔我說的稍微形象化，假如這是一個 100 個節點圖數據有那麼多關係，你會發現傳統你去看的時候很是麻煩，可是若是簡單經過圖可視化的技術，你會發現是很是容易的。它會經過節點和邊的構建關係，讓你很快的發現你想要的一些節點。

因而在業務應用場景中，咱們理想是可以把這三層去完成，好比說可看可理解和可分析這三層，咱們先從最底層可看開始，剛纔十吾同窗講的 G6 對咱們 AntV 推出了一個關於數據的渲染引擎和可視化引擎。你能夠看到 E 呢是 edge 就是邊，V 是 vertex 節點，它實際上就是把節點和邊怎麼樣快速的去渲染出來，除了這種常規的關係數據以外，咱們其實還有持續數據，還會有一些位置，好比說地圖位置信息，包括還有海量的數據，其實都須要一整套的引擎去作，包括在視覺規範層，咱們須要對節點進行規範，邊境規範包括還有整個的設計樣式進行規範。

可能你們不太理解的是第二層就是可理解，其實咱們知道不少的圖數據自己，關係數據自己它其實是有必定的結構的，剛纔十吾也講到，好比說有些數據是有層次的，它能夠構建成一個 tree 或者構建成一個樹或者一個有效分層，反映到咱們現實生活中，好比說一個資金的套現網絡，它套來套去最終會回到原點，因此它自然就是環狀的一個結構，若是咱們的佈局經過環形佈局去佈局它的話，就很快的可以讓運營同窗能快速理解。

好比說像一個資金分流網絡，它必定是資金有多條鏈路，最終它經過一層層的分流匯聚，最後到達某一個節點，你這個時候你經過 diagram 佈局就會很是的清楚，因此說佈局其實解決的是一個數據可理解的問題。

最後到上層的分析，剛纔十吾同窗也花了很長時間去講了，在機構裏面咱們如何經過交互的手段輔助手段去作整個分析，這裏面我想強調的是在 Graph 裏面也就是在理想大圖裏面，咱們還會提到一種叫高級分析，就是把業務特殊場景中的一些分析方法呈現進來，這是咱們理想的一個可視化大圖。

解決方案

這兩張大圖裏面咱們就聊到第 6 個，就是咱們基於這樣一張大圖，AntV 推出一款解決方案叫 Graphin，在回答Graphin 是什麼以前咱們先來看一下 Graphin 有哪些的特性。Graphin 官網上它有 6 個特性，分別是輔助分析、高級分析、技術分析、自動佈局、數據驅動和擴展機制。

咱們經過顏色映射出來，你會發現先看底層的紫色這個地方，它實際上數據驅動和擴展機制實際上表明瞭 Graphin 想作的一個產品目標，就是對開發者友好，咱們選用的是 React 框架直接跟 React 框架集成，運用了數據驅動一種編程模型，而且可以基於 G6 提供一個很是強大的擴展機制。

第二個就像基礎分析和自動佈局，還有輔助分析，這些東西原先用任何一個類庫，你都須要不少的方法去組合成，在 Graphin 裏面咱們會把它封裝徹底內置掉，你能夠經過開關的方式去開啓或者關閉，大大的下降了整個圖分析的門檻以及開發的效率。

最後一個是咱們重點要去打造的是高級分析，由於 Graphin 如今服務了不少業務方，實際上每一個業務方都在不一樣的領域，他們領域中有一些特定的分析方法，咱們但願最終可以沉澱下來，而後爲整個行業內的同窗提供一個服務。這裏你能夠看到這邊左側的最右側，這是 Graphin 簡單的一行代碼，其實就已經能夠完成一個很是複雜的圖的分析。

咱們分別圍繞 Graphin 這三個特性，這三個目標高級分析，開箱即用和開發友好分別去看，好比說咱們第一個目的是但願可以作到開箱即用，那咱們就必須把不少樣式都已經內置掉了，咱們內置有節點、邊、顏色、色板，包括還會在接下來會發一個大的版本，會去把整個主題也會作進來，你們能夠看到這個是不少類庫作不到，由於咱們最主要的仍是會有一套設計規範在的。

一樣的咱們也會把不少圖的一些交互也內置掉了，像這裏展現的右鍵菜單、顯示和隱藏、高亮、收起展開、聚焦等等，爲何要作這些交互？

剛纔十吾同窗在 G6 那個篇章的時候已經跟你們講了不少，其實目的就是爲了看清節點，看清邊，看清全局等等，而後減小一些視覺的干擾，可以幫助咱們快速去分析和決策。

在開箱即用裏面還內置了不少佈局，這個是 Graphin 內置應該有 7 種佈局，最左側的是通用佈局的一個自由切換，固然右側這邊是咱們會針對一些增量佈局，好比增刪改查它的佈局也會作一些相應的改變。

最後一個是 Graphin 的第二個特色，就是 Graphin 但願可以作到開發友好，你能夠看到最左側的這個地方是 Graphin 的組件代碼，經過這個代碼你能夠看到咱們對於 data 和 layout 是徹底數據驅動的，在一個圖的數據中，節點的狀態、樣式、位置，甚至說我作了一些操做，增刪改查這些操做均可以經過操做 data，底下的圖就會自動的渲染，跟你開發一個普通的 React 組件沒有什麼區別，很是方便。

固然佈局也是同樣，你給我什麼樣的佈局，我會給你渲染什麼樣的佈局。一樣的咱們右側這個圖是 Graphin 官網的一個截圖，它其實突出了就是說咱們會有不少的一些擴展方案，像節點類型，邊的類型，圖標類型，佈局算法都是能夠提供擴展的。

最後是 Graphin 想作的高級分析，咱們但願沉澱一些領域方案，下面兩個圖你能夠看到在金融風控領域。

有的時候須要對個案進行探索分析，包括在知識圖譜領域，咱們也須要對知識進行推理，這兩個有個共同的特色就是說我可以經過一個節點擴散出一批節點，再經過一批節點中找到關鍵節點，再進行擴散，再預測，整個過程是須要全部的節點位置是可預測的。擴散的過程是很是穩定的，擴散結果也是可回溯的，好比這個圖你能夠看到就像福爾摩斯探案面板同樣，能經過一個線索找到另外一個線索不斷的擴展，在圖譜領域也同樣，它可以快速的經過圖譜推理可以把整個知識構建起來。

這實際上是兩個領域它沉澱的一個共同方案，咱們能夠先直接看一下結果，這個結果裏面 Graphin 會提供一種叫作漸進分析佈局，最左側是一個有動畫的，最右側的是一個無動畫的，不管是哪種其實都可以很快的幫助，以一種有須要這種關係探查，關係發現可以很輕鬆很快速就能作到。

具體的技術方案，我放在附錄裏面，若是有興趣的，咱們到時候能夠再交流，限於篇幅問題我就不展開去講。固然高級分析裏面不只限於剛纔講的漸進分析，咱們在將來還計劃有地理空間分析，持續分析，分組分析和算法分析，分組分析，你能夠看到上面這個圖其實是對於節點的分組，下面這個圖其實是對於邊的分組，包括算法分析上面這個圖，它其實是經過一個圖裏面去發現共同的 Python，而後對 Python 進行一種合併。下面你能夠發現經過直接調用 G6 的最短路徑算法，就能夠快速的找到它最短路徑，這些都是一些高級分析方法，可以幫助業務快速的去作一些分析和探查。

這裏 Scott 老師說推薦本書，這裏我就推薦這本書，就是圖分析與圖可視化，它最關鍵是下面這句話，在關聯數據中發現商業訴求。

固然也很是歡迎對圖感興趣，對可視化感興趣，能夠加入咱們的團隊，我和十吾分別在兩個團隊，但咱們也屬於兄弟團隊，我所在的團隊是在大數據部體驗技術部，咱們有不少的 BI 產品，包括數據分析，感興趣的同窗對商業 BI 感興趣的同窗能夠加個人微信，咱們能夠快速的進行內推，而後對體驗技術部門，其實咱們體驗技術部也有不少的產品，像 AntV、AntD、語雀這些東西都很是出名的，而後你們有興趣也能夠直接歡迎加入。

7、附錄

別忘了第二十九屆|前端數據可視化專場，高強度一次性洞察可視化的前端玩法，7-17 全天直播，9 位講師(阿里雲/螞蟻/奇安信/小米等)，報名上車👉 )：

全部往期都有全程錄播，能夠購買年票一次性解鎖所有

👉更多活動