ello~各位ITer！

这里是每周陪你技术内卷的小谷！

本期内容要介绍的是GO.js的高级使用——动态显示效果。

前言

官网地址：https://gojs.net/latest/

官网包含了200多个例子，api及介绍，学习入门等。

Go.js属于功能丰富的JS库，在Web浏览器和平台上可实现自定义交互图和可视化效果，Go.js用自定义模板和布局组件简化了节点、链接和分组等复杂的js图表。

它给用户交互提供了许多先进的功能：

例如：

拖拽、复制、粘贴、文本编辑、工具提示、上下文菜单、自动布局、模板、数据绑定和模型、事务状态和撤销管理、调色板、概述、事件处理程序、命令和自定义操作的扩展工具系统等等。

无需切换服务器和插件，Go.js就能实现用户交互并在浏览器中完全运行，呈现HTML5 Canvas元素或SVG，也不用服务器端请求。Go.js不依赖于任何JS库或框架，可与任何HTML或JS框架配合工作，甚至可以不用框架。

用功能强大的Go.js可以构建自定义建模环境和特定的可视化语言，使用共享代码和模板提供一个系统编辑器和只读状态监控，在不同的图表中显示相同数据的可视化替代，实现子图或其它图表的详细视图扩展。

Go.js是一个能够让我们很容易的实现基于html5浏览器绘制具有交互性的图形图表的JavaScript框架。它采用了面向对象的编程模式，以图形对象表示绘图模板，以用普通js对象存储数据作为数据模型，然后赋值给图形对象的属性作为数据绑定的模式。

Go.js同样提供了大量工具类来代表我们的交互行为。我们需要做的就是创建图形对象、构建数据模型、设置属性、绑定数据模型、使用工具类添加行为即可创建出具有丰富交互性能的各种图表。

——GO.js概念来源

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

一、介绍

1.回顾

下文将以Vue2项目为例，进行动态显示效果的快速入门学习。

我们以实现图中效果为例——静态展示链路日志：

（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）创建图表

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

（5）设置节点,自定义tooltip

const tooltiptemplate =

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

（6）设置连接线,linklabel等

this.myDiagram.linkTemplate =

（7）鼠标移入移出线条样式

（8）设置数据

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

（9）渲染

this.myDiagram.layoutDiagram(true)

二、Comparator接口

动态展示节点信息，查找节点进行高亮，根据节点的广度深度进行横纵展示，示意如下：

1.动态显示节点

每个要动态显示的元素绑定一个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>
// 数据动态渲染
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, // 最大行数和溢出
    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节点添加透明度即可：

// 异常高亮
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高亮当前应用及分支

先获取当前选中节点的所有父节点，给这些节点设置透明度为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
      }
    })
  })
},
// 获取当前节点的所有父节点
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.根据节点的广度深度进行横纵展示

Java 集合接口 java.util.Collection 中包含一个称为 iterator() 的方法。通过调用 iterator()，可以从给定的 Collection 中获取迭代器。Java 集合框架中实现了 Collection 接口的数据结构，比如列表、集合(Set)、队列、双端队列等等，它们都实现了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的高级使用之动态显示效果，更多内容欢迎关注之后的文章。

福利：关注恭粽号[IT硅谷]，回复【JS特效】，免费下载116个JS特效动画效果！包括：

可自定义js弹出层动画特效

css3鼠标悬停按钮线条动画效果代码

jquery鼠标悬停横向时间轴代码

Canvas跳动彩球时间动画特效

jquery宽屏焦点图片动画轮播代码

jQuery+css3制作飘动的云动画特效

html5文字粒子动画效果代码

CSS3鼠标悬停图片文字动画效果代码

CSS3折页扇子翻转动画效果代码

纯CSS3实现按钮动画效果代码

纯CSS3实现眨眼动画特效

jQuery鼠标悬停文字渐隐渐现动画效果等等共计116个