使用gojs背景

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

gojs的引入

我們可以直接引入js的方法對gojs進(jìn)行引入

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

還可以使用cdn的方式進(jìn)行使用

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

當(dāng)然也可以通過npm進(jìn)行安裝

npm install gojs --save

本文檔以引入gojs文件的方式，在vue中使用為例。因此我是在index中引入了gojs文件，因?yàn)榉奖闳コ?，并且代碼的同步。

然后我們就可以gojs進(jìn)行使用啦，首先我們需要在使用的頁面進(jìn)行引入。

<script>
let $$ = go.GraphObject.make;//因?yàn)轫?xiàng)目中使用到j(luò)query,所以使用$$進(jìn)行一個(gè)區(qū)分
export default {

然后在mounted中對this進(jìn)行一個(gè)接收，以便我們在使用的時(shí)候出現(xiàn)this指向錯(cuò)誤的問題。

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

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

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

然后我們對gojs進(jìn)行實(shí)例化,通過容器的id進(jìn)行綁定，并且為圖形的布局方式設(shè)置一個(gè)樹形布局。

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

這樣，我們一個(gè)簡單的畫布就已經(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"},
  ]);

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

在執(zhí)行new go.Model的時(shí)候，其傳入的兩個(gè)參數(shù)分別為節(jié)點(diǎn)數(shù)據(jù)和連線數(shù)據(jù)，在這里我們稱之為nodes和links，其中nodes中包括key（必須，節(jié)點(diǎn)的唯一標(biāo)識）和其他字段（主要是存儲(chǔ)一些節(jié)點(diǎn)的配置項(xiàng)，比如節(jié)點(diǎn)的number數(shù)據(jù)或者其他需要在節(jié)點(diǎn)內(nèi)顯示的文字和圖表等），而links包括from（必須，連線的出發(fā)節(jié)點(diǎn)的key）和to（必須，連線的結(jié)尾節(jié)點(diǎn)的key）字段和其他字段（比如連線上的關(guān)系文字說明），其中節(jié)點(diǎn)通過key來標(biāo)識，因此我們要求數(shù)據(jù)的key必須唯一。不然的話，link數(shù)據(jù)在匹配出發(fā)節(jié)點(diǎn)和結(jié)束節(jié)點(diǎn)的會(huì)匹配到nodes數(shù)據(jù)中key值相同后面的節(jié)點(diǎn)，而nodes數(shù)據(jù)中key值相同的面的數(shù)據(jù)節(jié)點(diǎn)會(huì)生成一個(gè)游離的節(jié)點(diǎn)，因此不符合我們的需求。并且因?yàn)閷傩圆季值奶厥饨Y(jié)構(gòu)，我們還可以parent字段來處理一下數(shù)據(jù)。

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

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

去除水印

當(dāng)然你應(yīng)該也發(fā)現(xiàn)了，圖像渲染的畫布上會(huì)出現(xiàn)gojs的版本信息和介紹等等水印，而去除這些水印是需要氪金的，然而我們還有一些其他方法能對水印進(jìn)行去除，我們在下載的go.min.js中全局搜索7eba17a4ca3b1a8346找到a.ir或者a.jv等，因?yàn)榘姹镜牟灰粯訉傩缘拿忠矔?huì)發(fā)生改變

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

然后把這段代碼替換為

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

只要保證屬性名一致就可以，然后重啟我們的項(xiàng)目就可以清除水印啦。

在下篇文章中我們會(huì)通過this.myDiagram.nodeTemplate中的通過TextBlock、shape、Picture、Groups、Panel和界面的布局來對我們的節(jié)點(diǎn)進(jìn)行豐富而顯示出各種各樣并且顯示內(nèi)容不同的的節(jié)點(diǎn)類型。

以上就是GoJs基本使用示例詳解的詳細(xì)內(nèi)容，更多關(guān)于GoJs基本使用的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論