交互式可視化js庫gojs使用介紹及技巧

Posted on by

1. gojs 簡介

gojs 是一個用於構建交互式可視化圖的 js 庫，使用可自定義的模板和佈局構建復雜節點、鏈接和組，從而構建出簡單到復雜的各類圖，如流程圖、腦圖、組織圖、甘特圖等。而且提供瞭許多用於用戶交互的高級功能，例如拖放、復制和粘貼、就地文本編輯……

gojs 是 Northwoods Software 的產品。Northwoods Software 創立於1995年，專註於交互圖控件和類庫。其願景是提供卓越的圖形用戶界面，目前已成長為跨各種平臺的交互式圖組件和類庫的世界級供應商。

2. gojs 應用場景

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

  1. 流程圖
  2. 腦圖
  3. 樹圖
  4. 甘特圖
  5. 柱狀圖
  6. 餅圖
  7. 地圖
  8. 儀表盤
  9. 更多示例圖(數百個)

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"))
    );

更多：指南、api

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. 實踐：實現節點分組關系可視化交互圖

  1. 需求：能正確展示組的層次，以及節點之間的關系。並實現交互：
    • 單選節點、多選節點，獲取到節點信息
    • 選中組，能選中組中的節點，能獲取到組中的節點信息
    • 選中節點，當前節點視為根節點，能選中根節點連線下的所有節點，並獲取到節點信息
  2. 從後端獲取到的接口數據：

接口數據

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" }
  		]
  	}
  1. 參考 gojs demo：grouping、 navigation

最後

實現效果思路下次分享，如果感興趣，可以利用數據，借鑒參考demo及本文分享的知識，自己動手實現下

我也是從新手（之前沒接觸過 gojs）到最終實現效果，本文如有不到位或錯誤的地方，亦或是好的意見，歡迎指出。

非常感謝！！！

到此這篇關於交互式可視化js庫gojs使用介紹及技巧的文章就介紹到這瞭。希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：