引言—— 你知道能源是如何流轉的嗎？人類是如何掌控能源的來源、中間環節、最終去向的？如何生成一張清晰表達能源流轉的圖？數以百計的圖佈局算法，究竟哪個適合展示能源流轉？本文將分析各種佈局，最終以最佳方式展現能源的流轉。如果你想直接查看能量圖最終結果及其分析，請直接滑至本文結尾處。

本文中的圖可視化由G6 提供支持。
G6 —— 專業的圖可視化引擎。讓關係數據變得簡單透明，讓用戶獲得Insight。
G6官網： antv.alipay.com/zh-cn/g... 。歡迎關注。
GitHub： github.com/antvis/g6 。歡迎Star。

0 前言

從古至今，能源都是人類生存的基礎。古時候，人們利用如動物糞便、草木柴薪等生物能源為之提供光和熱。現代社會，能源的來源更豐富了：石油、核能、風力……人類更加離不開能源，它也是社會發展和經濟發展的推動力。能源的來源和節約是人們關注的問題。那麼，當今人類又是如何掌控和利用能源的呢，又有多少能源是被人類白白浪費的？為了分析上述能源數據，本文將與您一起探索如何製作能量圖可視化。如果您（不想看囉里八嗦的佈局選擇）想直接查看能量圖的最終可視化及其分析，請直接滑至本文結尾處。

在上一篇Graph Visualization ·知多少：《 Hello World圖可視化》一文中，我們已經知道了圖的可視化方法主要有三種：弧線圖、鄰接矩陣、點線圖。其中，點線圖（如下圖，點線圖是由節點和線/邊構成的圖，節點是實體/對象，邊是對象間關係）是最為流行的一種。本文將圍繞點線圖，設計一個適合展示能源流轉的圖可視化。

1 能源數據-> 圖

本文使用的能源數據是各個能源環節之間的能源輸入、輸出關係。例如從太陽能到電能的能量流轉、電能到家用電的能量流轉等。

圖特別適用於展現實體/對象之間的關係。而能量數據的重要訊息也在於各環節之間的能量流轉關係。每個能源流轉/轉換是存在於兩個相關環節之間的。因此每個環節可以被視作點線圖中的節點，能源流轉則是連接兩個環節節點的邊。

2 能源圖VS 佈局

什麼是佈局？
佈局是點線圖中的節點位置的放置方式。相對應地，佈局算法是用於自動計算節點位置的算法。舉個栗子，上圖中太陽能節點在左側，電能節點在中間，其他節點在右側，這樣的安排就算是一種佈局。在節點較多、關係複雜的圖上，無法手動指定每個節點位置。此時可以藉助佈局算法，依據關係自動計算節點位置。有了合理的佈局，才能可視化出清晰的關係。

為什麼要用佈局算法？
以能源數據為例，如果要將能源數據呈現成為屏幕中的一張圖，就需要為每一個節點指定它在屏幕中的位置。然而能源數據中的對象和關係非常複雜，手動指定位置不現實（不信你手動擺一擺節點試試，能拖出一個合理美觀的圖算我輸），只能依靠強大的佈局算法。

佈局方法千千萬，究竟哪種最好？我們認為，佈局沒有好壞之分，只有適合與否之分。根據不同的數據結構、使用場景、分析需求，選定一個合適的佈局是一個圖可視化是否成功的關鍵。下文將分析各類佈局中較為常見的算法，最終選取適合能源圖的佈局。

在圖可視化中，根據其數據的結構中是否存在環，可以歸類為一般圖和樹圖（Tree Graph）。一般圖允許存在環，而樹圖中不存在環。下面，我們將分析多種樹圖佈局、一般圖佈局，以選擇和適用於能源流轉的圖可視化佈局。

2.1 樹圖佈局

離散數學告訴我們，樹是一種數據結構。相比於一般圖的數據結構，樹圖不存在環，除根節點外，每個節點只有一個先繼（父）節點。樹更簡單、更易理解。

樹圖常被應用在家譜、生物進化等表達中，從根到葉子的一條路徑代表了從源頭到最終形態的過程（我是7號，我爸爸的爸爸的爸爸是誰？） 。

對於樹圖，研究者們提出了不少樹圖的佈局。這些佈局各有優劣，圖3（左） ^[1]最為直觀，但它對屏幕空間的利用率不高。圖3（中） ^[1]將樹根據節點的深度佈局成輻射狀，以更好地利用空間。圖3（右） ^[2]顯示的氣球佈局將子樹佈局到父節點周圍。但後兩種方法不如圖3 （左）圖清晰，用戶常常在探索過程中感到困惑。

對於經典的層次視圖，根據層級之間的放置規律，已有一些成熟的算法，圖4使用G6提供的幾種樹圖佈局（在線demo點【這裡】 ） ：

與樹圖相似，能源圖希望表達從能源的來源到最終去向的路徑。但別忽略了其中的環結構：如下圖，由於能源的流失也算是一個去向節點，電力的來源可能來自於核能、風能等，電力的去向也可能是工業或流失等，而核能也可能直接流失了。顯然，由於數據結構的問題，能源圖應該被劃分到一般圖。上述樹圖佈局都不適用。

2.2 樹+ 回溯邊（非樹邊）佈局

既然能源圖數據不是一個樹結構，那麼，我們是否能藉助樹圖的層次和簡明性，降低其複雜性呢？一些圖可視化研究者從一般圖的抽取一棵生成樹進行展示，不展示回溯邊（非樹邊）。例如圖5展示了從灰色的原圖計算了其最小生成樹（紅色）：

但直接展示最小生成樹必然丟失一些重要的關係訊息（非樹邊）。因此，一般圖還可以被可視化為樹+ 非樹邊。在繪製完生成樹後，將剩餘的非樹邊繪製回圖上（見圖6（左）^[3]）。例如經典的樹圖^[3]，輻射狀視圖^[4]，以及treemap 視圖^[5][6]。許多可視化系統，例如^{[3][4][6][7][8][9][10][11][3]}，都使用了這種方法。

現在，我們嘗試使用樹圖+ 回溯邊的方式佈局能源流轉圖。樹圖雖然易於觀察和探索，但選取的根節點合適與否將會影響整個圖的表達，根節點一般是一個能夠代表圖的起源或開端的節點（爸爸的爸爸的爸爸是不能亂選的！ ） 。圖7 所示的能源圖樹佈局選取的根節點並不是所有能源環節的源頭，這是因為能源圖中的起源點可能不只一個，核能、石油、風能、潮汐能一類能源的最初形態都是能源流轉的起源。也就是說在該圖上，選取任何一個節點作為根節點都不合適。另外，圖7（右）將非樹邊繪製回圖上後，產生了一些很長的邊，跨越整個圖，造成了眾多邊交叉，這些是不符合圖佈局的美學原則^[11]的。 （啊餵，那幾條豎直的邊，你到底是要連到誰呀。）

知乎圖片好模糊呀，看高清圖點【這裡】 。

雖然在這種佈局方式在能源圖上不適用，但若數據的邊是包含層次關係類型的多種類型的邊，樹+邊佈局則非常適用。例如，WebMap ^[8]一文設計了用戶網頁瀏覽器瀏覽歷史記錄的可視化。如果網頁A 被第一次訪問，一個代表該網頁的新節點將會被添加在它的先繼節點（即代表上一個網頁的節點）之後。如果網頁A 曾經被瀏覽過，當其再次被瀏覽時，一個穿過樹結構的非樹邊將會被創建以連接節點A 和它的先繼節點。

2.3 其他佈局方法

既然使用樹佈局的方法展示非樹結構的能源圖不合適，下文將嘗試其他一般圖佈局方法。 （不要為了一棵樹放棄一片森林啊。）

2.3.1 彈簧佈局/ 力導向佈局

彈簧佈局，即被熟知的力導向佈局，是另一種流行的一般圖佈局策略。在彈簧佈局中，一般圖被建模成具有環和彈簧的物理系統。作為繪製一般圖的最早實際算法之一，彈簧佈局最早在1984 年被Eades^[12]提出後，被許多研究重新定義和改進^{[13][14][15][16][17]}。

擴展：研究人員還嘗試使用彈簧的原理減少節點的重疊^[10][18]。完全解決一個小空間範圍內的圖中所有節點的重疊問題，已被證明是NP難的^[19]。 （PD：能不能把這個邊交叉、點重疊搞少一點，好醜好亂。我：優化優化可以，全部消除是莫得辦法的呀，NP難的世界難題，你給我搞筆科研經費我給你研究一輩子試試。）

圖8 嘗試使用力導向佈局展示能源圖，節點大小映射了該能源環節點的總能量值；邊的箭頭代表能源流轉的方向，粗細代表沿該流轉的能量值。可以發現與電力網（Electricity grid）節點相關的邊數量最多，但它的總能量值不如熱能生成（Thermal generation）節點，這是個有趣的發現，原來人們對電能的產生和使用渠道比較多，但對熱能的需求量更高。同樣，從節點大小和相關邊數量還可以看出，人類對太陽能（Solar）、氫氣能（H2）、風能（Wind）等清潔能源的利用還比較小。

知乎圖片好模糊呀，看高清圖點【這裡】 。

雖然力導向圖能夠帶給我們一些有趣的訊息，但我們還是難以清晰了解能源從產生到使用的各環節流轉情況。力導向圖的另外一個弊端在於，它的計算量龐大（需要 甚至 的時間複雜度），一遇到大規模圖算法就要宕機了。而且，力導向算法在可預測性方面存在缺陷—— 相同算法在同樣的輸入下，每次運行的結果可能完全不同。由於用戶的導航探索重度依賴於圖的視覺表現，這種不可預測性在某些場景中導致了一些嚴重的問題。如圖9 所示，力導向算法在能量圖數據上又運行了3 次，均產生了不同的佈局結果，這將導致用戶在探索、對比時的心理地圖遭到破壞。 （PD：喂喂，這幾張真的是同一幅圖嗎？你的代碼是不是有問題，改了我的數據！？我：冤枉啊。）

2.3.2 形狀導向的點線佈局

為突出某些訊息或達到某些視覺需求，一些形狀導向的點線佈局被提出。例如環狀佈局（Circular Layout）可用於突出數據結構中的環，但如圖10（左）將之應用到非環結構的圖上時，節點的排列順序將會影響邊的交叉數量；再如圖10（中）的格子佈局（Grid Layout）可以讓簡單圖看起來十分規整，但在關係複雜的圖上將會出現大量長邊和邊交叉。顯然，這兩種佈局對於分析能源圖沒有太大的幫助，只能滿足一種“整齊”的視覺需求。 （PD：嗯嗯，一家人整整齊齊，真不錯。我：這...你能分析出啥？）

知乎圖片好模糊呀，看高清圖點【這裡】 。

輻射狀佈局（Radial Layout）是輻射狀樹佈局^[1]的擴展，可突出關注點與其他節點的最短路徑關係。圖11 使用G6 展示了能量圖的輻射狀佈局，其關注點是核能（Nuclear）。作為能源起源點之一，根據其輸出可以發現核能（Nuclear）的能量全部用於熱轉換（Thermal generation）。根據關係邊的粗細可以發現，熱轉換後大部分流失了（Losses） （心疼1秒鐘） ，還有一部分被轉換為電力（Electricity grid）和供暖（Distrct heating），接下去用戶可以探索電力網的直接輸入與輸出環節。輻射狀佈局適用於探索關注點的一度關係、二度關係、...等，但在能源圖上，我們更希望從多個能源起源點出發，關注能源流轉。因此，輻射狀佈局並不完全適用。

知乎圖片好模糊呀，看高清圖點【這裡】 。

2.3.3 層次/ 流程圖佈局

為了展示能量圖中各環節的流轉，流程圖似乎比較適合。我們嘗試使用層次佈局算法Dagre 進行佈局，它根據有向圖數據中邊的方向將節點進行分層。如圖12 所示，能源的起源點（只有輸出邊，沒有輸入邊的節點）大部分被放置在了第一層（最左側），把源頭放在開始觀察的位置比較符合能源圖的觀測需求，但如核能（Nuclear）、風能（Wind）等部分起源節點並沒有被放置在第一層，這是Dagre 的計算機制導致的。因此，層次佈局仍然不能完美地符合“源頭-> 中間環節-> 最終輸出”的觀察過程。

知乎圖片好模糊呀，看高清圖點【這裡】 。

2.3.4 流圖/ 桑基圖—— 最終選擇

（PD：有完沒完了，快給我個痛快！我：喳，瞧好了您吶。）嚴格來說，桑基圖不算是完全意義上的點線圖。與流程圖類似，它將自動根據邊的走向對節點進行分層以表達流向（一般是從左到右），並使用高度不同的矩形代表節點，帶有寬度的邊代表兩端點間流量，一個節點輸入邊寬之和或輸出邊寬之和等於節點的高度，從而可以映射每種流量的佔比。 （說起來有點抽象，看圖13 就明白啦。）

由上文中的流程圖得到啟發，我們重新審視能量圖可視化的需求：

• 滿足“源頭-> 中間環節-> 最終輸出”的層次觀測觀測需求；
• 能夠展示出節點、邊的流量（能量值）及其占比；
• 能量的流轉方向。

總而言之，能量圖最重要的是表達“流”、“層次”訊息。那麼，流圖或桑基圖應該特別適用。如圖13 所示，節點高度表示該環節總能量值，邊的粗細代表其兩端點之間的能量傳輸值。所有的起源節點被放置在第一層（最左側），最終輸出節點在最後一層（最右側）。可以清晰探索每一條能源流的走向、環節。

知乎圖片好模糊呀，看高清圖點【這裡】 。交互Demo點【這裡】 。

（我：PD大大，來分析一波吧）基於圖13的能量流轉桑基圖，可以分析：

• 根據節點大小可以發現核能（Nuclear）的能量值是所有能源源頭中能量值最高的，其次是石油（Oil imports）、風能（Wind）；
• 能源最終輸出中，最大的一部分竟然是被流失了（Losses） （人類真該好好思考如何提高能量轉換率呢），其次是工業（Industry）、家庭採冷暖（Heating and cooling -homes）；
• 在中間環節裡，熱能轉換（Thermal generation）的能量值最高，其次是電力網（Electricity grid）；
• 還可以發現能源可以被劃分為固體（Solid）、氣體（Gas）、液體（Liquid）三類，其中包含石油在內的液體佔比最高，它的主要使用場景是運輸（公路運輸Road transport，海運International shipping、航運International aviation）及工業，而氣體、固體則主要用於產熱與產電；
• 人類對清潔能源的使用量不高，代表潮汐能（Tidal）、太陽能（Solar）、氫氣能（H2）、水電（Hydro）的節點都非常小；
• 有一種少見的能源——海藻能（Marine algae）出現在了起源節點中，查閱相關資料發現這是一種綠色能源，可以用於製作海草燃料和海草油；
• ...... 更多訊息由您來探索啦。

3 結束語

點線圖可視化依賴於圖佈局算法，應當根據數據特性、分析需求、結合終端用戶的心智，在茫茫算法中選擇合適的一種。圖可視化不是只有力導向一種，力導向圖並不能解決所有需求鴨。

兩個點，一條邊，就是一幅圖：圖可視化就是這麼簡單；但它又變化無窮，姿態萬千：圖可視化又是這樣複雜。時而極簡，時而繁華，時而文藝，時而張揚，這就是圖可視化的魅力所在吧。

想要看到更多圖可視化小知識，持續關注《Graph Visualization · 知多少》哦！

本文中的圖可視化由G6 提供支持。
G6 —— 專業的圖可視化引擎。讓關係數據變得簡單透明，讓用戶獲得Insight。
G6官網： antv.alipay.com/zh-cn/g... 。歡迎關注。
GitHub： github.com/antvis/g6 。歡迎Star。

參考

1. ^ ^abchttps://ieeexplore.ieee.org/abstract/document/1173152/
2. ^ https://pdfs.semanticscholar.org/972c/884f590643a2dcee25d87747fc53399dea7a.pdf
3. ^ ^abcdhttps://www.academia.edu/5636645/Latour_A_Tree_Visualisation_System
4. ^ ^abhttps://ieeexplore.ieee.org/document/1249009/
5. ^ https://pdfs.semanticscholar.org/2f43/a4490ef40fb15f23068a8f6dcca125207c8a.pdf
6. ^ ^abhttp://www.cs.jhu.edu/~misha/ReadingSeminar/Papers/Holten06.pdf
7. ^ https://www.researchgate.net/publication/6715557_Measuring_Data_Abstraction_Quality_in_Multiresolution_Visualizations
8. ^ ^abhttps://www.sciencedirect.com/science/article/pii/0169755295001036
9. ^ https://www.academia.edu/25370586/Web-Based_Visualization_of_Large_Hierarchical_Graphs_Using_Invisible_Links_in_a_Hyperbolic_Space
10. ^ ^abhttps://link.springer.com/chapter/10.1007/11555261_67
11. ^ ^abhttps://www.researchgate.net/publication/30508476_Validating_Graph_Drawing_Aesthetics
12. ^ http://www.it.usyd.edu.au/~peter/old_spring_paper.pdf
13. ^ http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.13.8444&rep=rep1&type=pdf
14. ^ https://www.researchgate.net/publication/30508672_Improved_Force-Directed_Layouts
15. ^ http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.31.9809
16. ^ https://www.researchgate.net/publication/240580515_A_Multidimensional_Approach_to_Force-Directed_Layouts_of_Large_Graphs
17. ^ http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.69.7213&rep=rep1&type=pdf
18. ^ https://www.sciencedirect.com/science/article/pii/S1045926X85710105
19. ^ http://www.wisdom.weizmann.ac.il/~harel/papers/highdimensionalGD.pdf