焦點新聞圖代碼,焦點資訊是哪個軟件的
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折頁扇子翻轉動畫效果代碼
純CSS3實現按鈕動畫效果代碼
純CSS3實現眨眼動畫特效
jQuery鼠標懸停文字漸隱漸現動畫效果等等共計116個
