ello~各位ITer！

這里是每周陪你技術(shù)內(nèi)卷的小谷！

本期內(nèi)容要介紹的是GO.js的高級使用——動態(tài)顯示效果。

前言

官網(wǎng)地址：https://gojs.net/latest/

官網(wǎng)包含了200多個例子，api及介紹，學習入門等。

Go.js屬于功能豐富的JS庫，在Web瀏覽器和平臺上可實現(xiàn)自定義交互圖和可視化效果，Go.js用自定義模板和布局組件簡化了節(jié)點、鏈接和分組等復雜的js圖表。

它給用戶交互提供了許多先進的功能：

例如：

拖拽、復制、粘貼、文本編輯、工具提示、上下文菜單、自動布局、模板、數(shù)據(jù)綁定和模型、事務狀態(tài)和撤銷管理、調(diào)色板、概述、事件處理程序、命令和自定義操作的擴展工具系統(tǒng)等等。

無需切換服務器和插件，Go.js就能實現(xiàn)用戶交互并在瀏覽器中完全運行，呈現(xiàn)HTML5 Canvas元素或SVG，也不用服務器端請求。Go.js不依賴于任何JS庫或框架，可與任何HTML或JS框架配合工作，甚至可以不用框架。

用功能強大的Go.js可以構(gòu)建自定義建模環(huán)境和特定的可視化語言，使用共享代碼和模板提供一個系統(tǒng)編輯器和只讀狀態(tài)監(jiān)控，在不同的圖表中顯示相同數(shù)據(jù)的可視化替代，實現(xiàn)子圖或其它圖表的詳細視圖擴展。

Go.js是一個能夠讓我們很容易的實現(xiàn)基于html5瀏覽器繪制具有交互性的圖形圖表的JavaScript框架。它采用了面向?qū)ο蟮木幊棠Ｊ剑詧D形對象表示繪圖模板，以用普通js對象存儲數(shù)據(jù)作為數(shù)據(jù)模型，然后賦值給圖形對象的屬性作為數(shù)據(jù)綁定的模式。

Go.js同樣提供了大量工具類來代表我們的交互行為。我們需要做的就是創(chuàng)建圖形對象、構(gòu)建數(shù)據(jù)模型、設置屬性、綁定數(shù)據(jù)模型、使用工具類添加行為即可創(chuàng)建出具有豐富交互性能的各種圖表。

——GO.js概念來源

https://blog.csdn.net/zy0412326/article/details/128890317

一、介紹

1.回顧

下文將以Vue2項目為例，進行動態(tài)顯示效果的快速入門學習。

我們以實現(xiàn)圖中效果為例——靜態(tài)展示鏈路日志：

（1） js或者csdn引入

<script src=”/static/go.js”></script>

（2） 指定容器

<div :id=”id” class=”myDiagram” style=”width:100%;height:100%”/>

const go = window.go

const $ = go.GraphObject.make

這里go是所有GoJS類型所在的“命名空間” 。所有使用GoJS類的代碼，例如 Diagram 或 Node 或 Panel 或 Shape 或 TextBlock 都將以“ go.”為前綴。

（3）引入icon

（4）創(chuàng)建圖表

this.myDiagram = $(go.Diagram, self.id, {})

（5）設置節(jié)點,自定義tooltip

const tooltiptemplate =

this.myDiagram.nodeTemplate=$(go.Node,'Horizontal',{toolTip:tooltiptemplate, background: '#fff' })

（6）設置連接線,linklabel等

this.myDiagram.linkTemplate =

（7）鼠標移入移出線條樣式

（8）設置數(shù)據(jù)

this.myDiagram.model = new go.TreeModel(data)

（9）渲染

this.myDiagram.layoutDiagram(true)

二、Comparator接口

動態(tài)展示節(jié)點信息，查找節(jié)點進行高亮，根據(jù)節(jié)點的廣度深度進行橫縱展示，示意如下：

1.動態(tài)顯示節(jié)點

每個要動態(tài)顯示的元素綁定一個visible屬性：

<el-checkbox v-model="isURL" @change="isChange($event, 'URL')">URL</el-checkbox>
<el-checkbox v-model="isTraceID" @change="isChange($event, 'TRACEID')">TraceID</el-checkbox>
<el-checkbox v-model="isSpanID" @change="isChange($event, 'SPANID')">SpanID</el-checkbox>
// 數(shù)據(jù)動態(tài)渲染
isChange(val, key) {
  this.myDiagram.commit(d => {
    d.nodes.each(node => {
      const name = node.findObject(key)
      name.visible = val
    })
  })
}
// spanId
$(go.TextBlock,
  {
    margin: new go.Margin(0, 10, 4, 15),
    stroke: '#0076FF',
    font: 'normal 12px helvetica neue',
    width: 160,
    textAlign: 'left',
    maxLines: 3,
    overflow: go.TextBlock.OverflowEllipsis, // 最大行數(shù)和溢出
    cursor: 'pointer',
    name: 'SPANID', // 方便查找元素
    visible: false
  },
  new go.Binding('text', 'spanId')
)

2.高亮效果

<el-checkbox v-model="faultLight" @change="faultLightChange">異常高亮</el-checkbox>
<el-checkbox v-model="faultLightRoot" @change="faultLightRootChange">高亮當前應用及到根部的分支</el-checkbox>

A異常高亮效果

給滿足條件的node節(jié)點添加透明度即可：

// 異常高亮
faultLightChange(val) {
  // code>=400為異常
  this.myDiagram.commit(d => { // d === myDiagram
    // iterate over all nodes in Diagram
    d.nodes.each(node => {
      if (val) {
        this.faultLightRoot = false
        // console.log(node.data.code)
        if (node.data.code >= 400) return
        node.opacity = 0.5
      } else {
        node.opacity = 1
      }
    })
  })
}

B高亮當前應用及分支

先獲取當前選中節(jié)點的所有父節(jié)點，給這些節(jié)點設置透明度為1，其他的設置為0.5：

faultLightRootChange(val) {
  const parentKeys = this.findPatentValue(this.copyTreeData, this.selectedKey, 'key', 'children')
  this.myDiagram.commit(d => {
    d.nodes.each(node => {
      if (val) {
        this.faultLight = false
        node.opacity = parentKeys.includes(node.data.key) ? 1 : 0.5
      } else {
        node.opacity = 1
      }
    })
  })
},
// 獲取當前節(jié)點的所有父節(jié)點
findPatentValue(array, targetId, valueKey, childrenKey) {
  if (!targetId || !Array.isArray(array)) return []
  const result = []
  let valid = false
  const seek = (_array, _targetId) => {
    let parentValue = ''
    const up = (_array_, _targetId_, lastValue) => {
      _array_.forEach(v => {
        const val = v[valueKey]
        const child = v[childrenKey]
        if (val === _targetId_) {
          valid = true
          parentValue = lastValue
          return
        }
        child ? child.length && up(child, _targetId_, val) : null
      })
    }
    up(_array, _targetId)
    if (parentValue) {
      result.unshift(parentValue)
      seek(_array, parentValue)
    }
  }
  seek(array, targetId)
  return valid ? [...result, targetId] : []
}

3.根據(jù)節(jié)點的廣度深度進行橫縱展示

Java 集合接口 java.util.Collection 中包含一個稱為 iterator() 的方法。通過調(diào)用 iterator()，可以從給定的 Collection 中獲取迭代器。Java 集合框架中實現(xiàn)了 Collection 接口的數(shù)據(jù)結(jié)構(gòu)，比如列表、集合(Set)、隊列、雙端隊列等等，它們都實現(xiàn)了iterator() 方法。

橫縱展示只需要設置angle，0度或者90度即可：

const widthDeepth = self.handleGetTreeDeep(self.copyTreeData) // 深度
const heightDeepth = self.handleGetTreeExtent(self.copyTreeData) // 廣度
self.direct = widthDeepth >= heightDeepth ? 'Horizontal' : 'Vertical' // 判斷橫向縱向
self.myDiagram =
  $(go.Diagram, self.id,
    {
layout:
    $(go.TreeLayout,
      {
        angle: self.direct === 'Horizontal' ? 0 : 90
      }
    ) 
}

以上就是Go.js的高級使用之動態(tài)顯示效果，更多內(nèi)容歡迎關(guān)注之后的文章。

福利：關(guān)注恭粽號[IT硅谷]，回復【JS特效】，免費下載116個JS特效動畫效果！包括：

可自定義js彈出層動畫特效

css3鼠標懸停按鈕線條動畫效果代碼

jquery鼠標懸停橫向時間軸代碼

Canvas跳動彩球時間動畫特效

jquery寬屏焦點圖片動畫輪播代碼

jQuery+css3制作飄動的云動畫特效

html5文字粒子動畫效果代碼

CSS3鼠標懸停圖片文字動畫效果代碼

CSS3折頁扇子翻轉(zhuǎn)動畫效果代碼

純CSS3實現(xiàn)按鈕動畫效果代碼

純CSS3實現(xiàn)眨眼動畫特效

jQuery鼠標懸停文字漸隱漸現(xiàn)動畫效果等等共計116個