焦点新闻图代码,焦点资讯是哪个软件的

2024-05-15 22:20:56

Hello~各位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)

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

1.动态显示节点

每个要动态显示的元素绑定一个visible属性：

2.高亮效果

A异常高亮效果

给满足条件的node节点添加透明度即可：

B高亮当前应用及分支

先获取当前选中节点的所有父节点，给这些节点设置透明度为1，其他的设置为0.5：

3.根据节点的广度深度进行横纵展示

Java 集合接口 java.util.Collection 中包含一个称为 iterator() 的方法。通过调用 iterator()，可以从给定的 Collection 中获取迭代器。Java 集合框架中实现了 Collection 接口的数据结构，比如列表、集合(Set)、队列、双端队列等等，它们都实现了iterator() 方法。

横纵展示只需要设置angle，0度或者90度即可：

以上就是Go.js的高级使用之动态显示效果，更多内容欢迎关注之后的文章。

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

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

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

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

Canvas跳动彩球时间动画特效

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

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

html5文字粒子动画效果代码

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

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