使用gojs背景

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

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,所以使用$$進行一個區(qū)分
export default {

然后在mounted中對this進行一個接收，以便我們在使用的時候出現(xiàn)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為樹形布局
    });
}

這樣，我們一個簡單的畫布就已經(jīng)初始化完成了。然后我們在畫布中加入一些相數(shù)據(jù)

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

然后一個簡單的樹形布局的圖形就出來了

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

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

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

去除水印

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

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和界面的布局來對我們的節(jié)點進行豐富而顯示出各種各樣并且顯示內容不同的的節(jié)點類型。

以上就是GoJs基本使用示例詳解的詳細內容，更多關于GoJs基本使用的資料請關注腳本之家其它相關文章！

最新評論