歡迎各位夥伴,能夠觀看這次live(前端資料視覺化方向)。在過去的一年的分享加起來可能只有7 8次的樣子,上傳到B站的只有一個(總是忘記錄屏...,這次也忘記了= =;) 收到了一些私信希望我多多繼續,其中也有一些很好的意見,在逐步轉換到我的分享中。今年會加大分享力度 內容呢就是視覺化,演算法,架構等等方向。
上面是我的個人微信,如果有需要可以新增一下。
今日分享主題圍繞入門入行。已什麼是G6?為引線展開。
G6是一個專注與圖視覺化分析的引擎,內部提供圖的繪製、佈局、分析、互動等基礎能力。引申出 graph 和 visualization關鍵術語,需要分析探索一下。
Graph並非我們傳統認知的圖畫,圖表,也不是指在計算機中圖的資料結構。而是圖論一種圖的理論。通俗來說它包含倆個元素 一個節點vertex一個邊edge(或者稱為實體與關係)。透過邊來連結節點。(如果圖中沒有節點一定沒邊。)圖包含一些專業術語以及圖的演算法。有興趣的小夥伴可以瞭解一下。
visualization 視覺化也並非我們傳統認識 只是chart,graph等資料的視覺化,還有有影像識別 地理資訊展示等等。。。它存在於各大領域,科學, 工程, 新聞等等。資料視覺化只是一種方向,描述。(非行業領域)。
進入今天的開頭話題 G6有設計體系 透過一些場景分析,提取出不限於表現層,互動層等相關的設計。還有一些值得發現並深入學習研究的細節。(感謝背後團隊的付出)
但是G6的軟體工程設計還是可以展開談談的。在語雀裡有內部他們的分享以及架構圖。我這邊透過學習貼的個人理解。
最新的4.+版本 layout模組 graph algorithms模組做了分離。(基於webWorker演算法部分內部含外網連結,內網同學注意)
內部原始碼模組分析 也算是核心部分的模組。 核心主要包含:
1.基礎渲染圖元的封裝
element(基於G的封裝)以及combo的特色實現。
- 互動類的事件
events,animates動畫等模組。plugins外掛化的工具類庫實現以及如何接入使用。