快捷導(dǎo)航

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

更新時間：2022年01月01日 12:04:50 作者：ESnail

這篇文章主要介紹了如何使用可視化庫gojs及使用時的小技巧，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

1. gojs 簡介

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

gojs 是 Northwoods Software 的產(chǎn)品。Northwoods Software 創(chuàng)立于1995年，專注于交互圖控件和類庫。其愿景是提供卓越的圖形用戶界面，目前已成長為跨各種平臺的交互式圖組件和類庫的世界級供應(yīng)商。

2. gojs 應(yīng)用場景

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

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

3. 為什么選用 gojs:

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

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

gojs、d3js > antv > echarts 、highcharts

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

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

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

總結(jié)：gojs 的高可自定義性，非常適合需求復(fù)雜的圖交互。

4. gojs 上手指南

查看案例：samples

目的是對 gojs 能做什么有大概的了解，以及查找及確認(rèn)哪個案例效果更接近自己的需求，可參考案例代碼完成需求，達(dá)到事半功倍的效果，也是上手非常不錯的借鑒資料。看完一到兩個案例代碼，也可對 gojs 繪圖有個基本了解。

關(guān)鍵概念

看了案例代碼后，對 gojs 繪圖有基本了解后。繪制圖之前了解下繪圖概念和結(jié)構(gòu)對繪圖會更有幫助。好似寫作前知道提綱，寫內(nèi)容思路會更清晰，效率更高。

開始動手繪制基本demo

引用庫
在頁面中創(chuàng)建 gojs 圖表容器, 并給容器設(shè)置寬高，否則圖形繪制不出來
創(chuàng)建圖表實例
定義布局、樣式、交互、屬性、事件等（可省略）
綁定數(shù)據(jù)，渲染圖表

    // 圖表容器
    <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>
        // 創(chuàng)建圖表實例
        var $ = go.GraphObject.make;
        var diagram = new go.Diagram("myDiagramDiv");

        // 綁定數(shù)據(jù)
        diagram.model = new go.GraphLinksModel(
            [ // 節(jié)點
                { 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>

如果要對布局、樣式、節(jié)點、組、連線、事件等控制，可自定義對應(yīng)模板，下面以節(jié)點為例:

    // 節(jié)點模板描述了如何構(gòu)造每個節(jié)點
    diagram.nodeTemplate = $(go.Node, "Auto",
        $(go.Shape, "RoundedRectangle", new go.Binding("fill", "color")),
        $(go.TextBlock, new go.Binding("text", "key"))
    );

更多：指南、api

5. 小技巧（非常實用哦）

去除水印，圖表繪制出來后默認(rèn)左上角有庫信息的水印。

庫源碼搜索 7eba17a4ca3b1a8346，找到該位置：

a.yr=b.V[Ra("7eba17a4ca3b1a8346")][Ra("78a118b7")](b.V,Kk,4,4);

注釋或刪除代碼，改為如下：

a.yr=function () {return true;};

es6 導(dǎo)入 gojs: 參考loadingGojs

因為上面要去除水印，所以必須下載庫源碼，并且現(xiàn)在前端項目基本都是基于 es6 模塊組織文件的。

故需求下載 go-module.js，這樣就能在需要的文件中再引入：

import * as go from './go-module.js';

此外，因 go-module.js 已經(jīng)打包過了，可配置打包排除該文件的打包，減少打包時間。以 webpack 為例，修改如下：

{
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test')],
    + exclude: [resolve('src/assets/lib/')] // 打包好的庫都放該目錄下
}

去除藍(lán)色邊框：點擊圖表，會看到圖表有藍(lán)色邊框。css 來幫忙：

.diagram canvas {
    border: none;
    outline: none;
}

diagram 為圖表容器的 class 名。

6. 實踐：實現(xiàn)節(jié)點分組關(guān)系可視化交互圖

需求：能正確展示組的層次，以及節(jié)點之間的關(guān)系。并實現(xiàn)交互：
- 單選節(jié)點、多選節(jié)點，獲取到節(jié)點信息
- 選中組，能選中組中的節(jié)點，能獲取到組中的節(jié)點信息
- 選中節(jié)點，當(dāng)前節(jié)點視為根節(jié)點，能選中根節(jié)點連線下的所有節(jié)點，并獲取到節(jié)點信息
從后端獲取到的接口數(shù)據(jù)：

接口數(shù)據(jù)

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": "數(shù)據(jù)組1" },
  			{ "key": "g--1586357764", "name": "數(shù)據(jù)組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" }
  		]
  	}