資料可視化 gojs 簡單使用介紹

1. gojs 簡介
2. gojs 應用場景
3. 為什麼選用 gojs:
4. gojs 上手指南
5. 小技巧（非常實用哦）
6. 實踐：實作節點分組關系可視化互動圖
最後

本文是關于如何使用可視化庫 gojs 的介紹及使用時的小技巧。

gojs 是一個用于建構互動式可視化圖的 js 庫，使用可自定義的模闆和布局建構複雜節點、連結群組，進而建構出簡單到複雜的各類圖，如流程圖、腦圖、組織圖、甘特圖等。而且提供了許多用于使用者互動的進階功能，例如拖放、複制和粘貼、就地文本編輯......

gojs 是 Northwoods Software 的産品。Northwoods Software 創立于1995年，專注于互動圖控件和類庫。其願景是提供卓越的圖形使用者界面，目前已成長為跨各種平台的互動式圖元件和類庫的世界級供應商。

基于 gojs 的高可建構性，可以繪制很多種類的可視化圖：

流程圖
腦圖
樹圖
甘特圖
柱狀圖
餅圖
地圖
儀表盤
更多示例圖(數百個)

可視化的庫非常多，如：echarts、highcharts、antv 系列、d3、以及今天的主角 gojs、......

按照可自定義繪圖的程度排序:

gojs、d3js > antv > echarts 、highcharts

如果需求簡單，不需要自定義圖元素，那麼 echarts 、highcharts 看中哪個 demo 效果就選用哪個庫。

如果有一定程度需要自定義圖元素，那麼可以看 antv g2/g6 demo 是否能滿足需求，可自定義大部分圖元素。

如果上面的都不能解決你的需求，那麼就是高可定制的，可以考慮 d3js、gojs，還是先去看 demo，看哪個更接近你的需求就采用哪個。

總結：gojs 的高可自定義性，非常适合需求複雜的圖互動。

檢視案例：samples

目的是對 gojs 能做什麼有大概的了解，以及查找及确認哪個案例效果更接近自己的需求，可參考案例代碼完成需求，達到事半功倍的效果，也是上手非常不錯的借鑒資料。看完一到兩個案例代碼，也可對 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"))
    );

更多：指南、api

去除水印，圖表繪制出來後預設左上角有庫資訊的水印。

庫源碼搜尋 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 名。

需求：能正确展示組的層次，以及節點之間的關系。并實作互動：
- 單選節點、多選節點，擷取到節點資訊
- 選中組，能選中組中的節點，能擷取到組中的節點資訊
- 選中節點，目前節點視為根節點，能選中根節點連線下的所有節點，并擷取到節點資訊

從後端擷取到的接口資料：

接口資料

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）到最終實作效果，本文如有不到位或錯誤的地方，亦或是好的意見，歡迎指出。

非常感謝！！！