交互式可視化js庫gojs使用技巧是什么

本篇內容主要講解“交互式可視化js庫gojs使用技巧是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“交互式可視化js庫gojs使用技巧是什么”吧!

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" ></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" }
  		]
  	}

到此，相信大家對“交互式可視化js庫gojs使用技巧是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！