GoJs基本使用示例詳解

Posted on by

使用gojs背景

因為公司業務需要，需要完成一個樹形的關系圖，並且在後續過程中會對樹形關系圖進行很多的交互來拓展樹形圖的展示。因此在研究瞭D3，antV G6，cytoscape和go.js之後，決定使用gojs實現。因為gojs的交互功能封裝比較完善，能夠很快的搭建出想要的關系圖之外，還有很多封裝好的交互功能。例如可以使用鍵盤進行節點的復制和粘貼，通過textEdited屬性實現節點內文字的雙擊編輯等等。

gojs的引入

我們可以直接引入js的方法對gojs進行引入

<script src="go.min.js"></script>

還可以使用cdn的方式進行使用

<script src="https://unpkg.com/gojs/release/go-debug.js"></script>

當然也可以通過npm進行安裝

npm install gojs --save

本文檔以引入gojs文件的方式，在vue中使用為例。因此我是在index中引入瞭gojs文件，因為方便去除水印，並且代碼的同步。

然後我們就可以gojs進行使用啦，首先我們需要在使用的頁面進行引入。

<script>
let $$ = go.GraphObject.make;//因為項目中使用到jquery,所以使用$$進行一個區分
export default {

然後在mounted中對this進行一個接收，以便我們在使用的時候出現this指向錯誤的問題。

mounted(){
    let _this = this
    this.$nextTick(()=>{
       this.init();//gojs實例化方法
    })
}

和很多可視化框架一樣，我們首先要為我們的圖形渲染提供一個容器，

<div 
    id="myDiagramDiv" 
    style="width:300px; 
    height:300px;">
</div>

然後我們對gojs進行實例化,通過容器的id進行綁定，並且為圖形的佈局方式設置一個樹形佈局。

init(){
    this.myDiagram = $$(go.Diagram, "myDiagramDiv",{
	layout: $$(go.TreeLayout)//佈局方式,TreeLayout為樹形佈局
    });
}

這樣，我們一個簡單的畫佈就已經初始化完成瞭。然後我們在畫佈中加入一些相數據

this.myDiagram.model = new go.Model(
  [ 
    { key: "1" },
    { key: "1-1" },
    { key: "1-2" }
  ],
  [
    {form:"1",to:"1-1"},
    {form:"1",to:"1-2"},
  ]);

然後一個簡單的樹形佈局的圖形就出來瞭

在執行new go.Model的時候，其傳入的兩個參數分別為節點數據和連線數據，在這裡我們稱之為nodes和links，其中nodes中包括key（必須，節點的唯一標識）和其他字段（主要是存儲一些節點的配置項，比如節點的number數據或者其他需要在節點內顯示的文字和圖表等），而links包括from（必須，連線的出發節點的key）和to（必須，連線的結尾節點的key）字段和其他字段（比如連線上的關系文字說明），其中節點通過key來標識，因此我們要求數據的key必須唯一。不然的話，link數據在匹配出發節點和結束節點的會匹配到nodes數據中key值相同後面的節點，而nodes數據中key值相同的面的數據節點會生成一個遊離的節點，因此不符合我們的需求。並且因為屬性佈局的特殊結構，我們還可以parent字段來處理一下數據。

this.myDiagram.model = new go.TreeModel(
    [ // the nodeDataArray
        { key: "1" },
        { key: "1-1", parent: "1" },
        { key: "1-2", parent: "1" }
    ]);

可以根據自己的實際需求進行選擇性進行哪種方式渲染方式。

去除水印

當然你應該也發現瞭，圖像渲染的畫佈上會出現gojs的版本信息和介紹等等水印，而去除這些水印是需要氪金的，然而我們還有一些其他方法能對水印進行去除，我們在下載的go.min.js中全局搜索7eba17a4ca3b1a8346找到a.ir或者a.jv等，因為版本的不一樣屬性的名字也會發生改變

a.ir=b.W[Ra("7eba17a4ca3b1a8346")][Ra("78a118b7")](b.W,ok,4,4);

然後把這段代碼替換為

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

隻要保證屬性名一致就可以，然後重啟我們的項目就可以清除水印啦。

在下篇文章中我們會通過this.myDiagram.nodeTemplate中的通過TextBlock、shape、Picture、Groups、Panel和界面的佈局來對我們的節點進行豐富而顯示出各種各樣並且顯示內容不同的的節點類型。

以上就是GoJs基本使用示例詳解的詳細內容，更多關於GoJs基本使用的資料請關註WalkonNet其它相關文章！

推薦閱讀：