本文是關於如何使用可視化庫 gojs 的介紹及使用時的小技巧。
1. gojs 簡介
gojs 是一個用於構建交互式可視化圖的 js 庫，使用可自定義的模板和布局構建復雜節點、鏈接和組，從而構建出簡單到復雜的各類圖，如流程圖、腦圖、組織圖、甘特圖等。而且提供了許多用於用戶交互的高級功能，例如拖放、復制和粘貼、就地文本編輯......
gojs 是 Northwoods Software 的產品。Northwoods Software 創立於1995年，專注於交互圖控件和類庫。其願景是提供卓越的圖形用戶界面，目前已成長為跨各種平台的交互式圖組件和類庫的世界級供應商。
2. gojs 應用場景
基於 gojs 的高可構建性，可以繪制很多種類的可視化圖：
- 流程圖
- 腦圖
- 樹圖
- 甘特圖
- 柱狀圖
- 餅圖
- 地圖
- 儀表盤
- 更多示例圖(數百個)
3. 為什么選用 gojs:
可視化的庫非常多，如：echarts、highcharts、antv 系列、d3、以及今天的主角 gojs、......
按照可自定義繪圖的程度排序:
gojs、d3js > antv > echarts 、highcharts
如果需求簡單，不需要自定義圖元素，那么 echarts 、highcharts 看中哪個 demo 效果就選用哪個庫。
如果有一定程度需要自定義圖元素，那么可以看 antv g2/g6 demo 是否能滿足需求，可自定義大部分圖元素。
如果上面的都不能解決你的需求，那么就是高可定制的，可以考慮 d3js、gojs，還是先去看 demo，看哪個更接近你的需求就采用哪個。
總結：gojs 的高可自定義性，非常適合需求復雜的圖交互。
4. gojs 上手指南
-
查看案例：samples
目的是對 gojs 能做什么有大概的了解，以及查找及確認哪個案例效果更接近自己的需求，可參考案例代碼完成需求，達到事半功倍的效果，也是上手非常不錯的借鑒資料。看完一到兩個案例代碼，也可對 gojs 繪圖有個基本了解。
-
關鍵概念
看了案例代碼后，對 gojs 繪圖有基本了解后。繪制圖之前了解下繪圖概念和結構對繪圖會更有幫助。好似寫作前知道提綱，寫內容思路會更清晰，效率更高。
-
開始動手繪制基本demo
- 引用庫
- 在頁面中創建 gojs 圖表容器, 並給容器設置寬高，否則圖形繪制不出來
- 創建圖表實例
- 定義布局、樣式、交互、屬性、事件等（可省略）
- 綁定數據，渲染圖表
// 圖表容器 <div id="myDiagramDiv" style="height:600px;width:100%;border:1px solid black"></div> // 引用 <script src="https://unpkg.com/gojs/release/go-debug.js"></script> <script> // 創建圖表實例 var $ = go.GraphObject.make; var diagram = new go.Diagram("myDiagramDiv"); // 綁定數據 diagram.model = new go.GraphLinksModel( [ // 節點 { key: "Alpha", color: "lightblue" }, { key: "Beta", color: "orange" }, { key: "Gamma", color: "lightgreen" }, { key: "Delta", color: "pink" } ], [ // 連線 { from: "Alpha", to: "Beta" }, { from: "Alpha", to: "Gamma" }, { from: "Beta", to: "Beta" }, { from: "Gamma", to: "Delta" }, { from: "Delta", to: "Alpha" } ] ); </script>
如果要對布局、樣式、節點、組、連線、事件等控制，可自定義對應模板，下面以節點為例:
// 節點模板描述了如何構造每個節點 diagram.nodeTemplate = $(go.Node, "Auto", $(go.Shape, "RoundedRectangle", new go.Binding("fill", "color")), $(go.TextBlock, new go.Binding("text", "key")) );
5. 小技巧（非常實用哦）
-
去除水印，圖表繪制出來后默認左上角有庫信息的水印。
庫源碼搜索 7eba17a4ca3b1a8346，找到該位置：
a.yr=b.V[Ra("7eba17a4ca3b1a8346")][Ra("78a118b7")](b.V,Kk,4,4);注釋或刪除代碼，改為如下：
a.yr=function () {return true;}; -
es6 導入 gojs: 參考loadingGojs
因為上面要去除水印，所以必須下載庫源碼，並且現在前端項目基本都是基於 es6 模塊組織文件的。
故需求 下載 go-module.js，這樣就能在需要的文件中再引入：
import * as go from './go-module.js';此外，因 go-module.js 已經打包過了，可配置打包排除該文件的打包，減少打包時間。以 webpack 為例，修改如下：
{ test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test')], + exclude: [resolve('src/assets/lib/')] // 打包好的庫都放該目錄下 } -
去除藍色邊框：點擊圖表，會看到圖表有藍色邊框。css 來幫忙：
.diagram canvas { border: none; outline: none; }diagram 為圖表容器的 class 名。
6. 實踐：實現節點分組關系可視化交互圖
-
需求：能正確展示組的層次，以及節點之間的關系。並實現交互：
- 單選節點、多選節點，獲取到節點信息
- 選中組，能選中組中的節點，能獲取到組中的節點信息
- 選中節點，當前節點視為根節點，能選中根節點連線下的所有節點，並獲取到節點信息
-
從后端獲取到的接口數據：
接口數據
const data = { "properties": [ { "key": "t-2272", "parentKey": "j-1051", "name": "哈哈" }, { "key": "p-344", "parentKey": "g--1586357764", "name": "test" }, { "key": "t-2271", "parentKey": "j-1051", "name": "查詢" }, { "key": "t-2275", "parentKey": "j-1052", "name": "開開心心" }, { "key": "j-1054", "parentKey": "p-344", "name": "嘻嘻" }, { "key": "t-2274", "parentKey": "j-1052", "name": "查詢" }, { "key": "j-1051", "parentKey": "p-444", "name": "hello" }, { "key": "j-1052", "parentKey": "p-444", "name": "編輯" }, { "key": "t-2281", "parentKey": "j-1054", "name": "嘻嘻" }, { "key": "p-444", "parentKey": "g--1586357624", "name": "test" }, { "key": "g--1586357624", "name": "數據組1" }, { "key": "g--1586357764", "name": "數據組2" }, { "key": "t-2273", "parentKey": "j-1051", "name": "新建" } ], "dependencies": [ { "sourceKey": "t-2272", "targetKey": "t-2274" }, { "sourceKey": "t-2274", "targetKey": "t-2275" }, { "sourceKey": "t-2273", "targetKey": "t-2272" }, { "sourceKey": "t-2271", "targetKey": "t-2272" }, { "sourceKey": "t-2272", "targetKey": "t-2281" } ] } -
參考 gojs demo：grouping、 navigation
最后
實現效果思路下次分享，如果感興趣，可以利用數據，借鑒參考demo及本文分享的知識，自己動手實現下
我也是從新手（之前沒接觸過 gojs）到最終實現效果，本文如有不到位或錯誤的地方，亦或是好的意見，歡迎指出。
非常感謝！！！