前言

計(jì)算機(jī)網(wǎng)絡(luò)的拓?fù)浣Y(jié)構(gòu)是引用拓?fù)鋵W(xué)中研究與大小，形狀無關(guān)的點(diǎn)、線關(guān)系的方法。把網(wǎng)絡(luò)中的計(jì)算機(jī)和通信設(shè)備抽象為一個(gè)點(diǎn)，把傳輸介質(zhì)抽象為一條線，由點(diǎn)和線組成的幾何圖形就是計(jì)算機(jī)網(wǎng)絡(luò)的拓?fù)浣Y(jié)構(gòu)。網(wǎng)絡(luò)的拓?fù)浣Y(jié)構(gòu)反映出網(wǎng)中各實(shí)體的結(jié)構(gòu)關(guān)系，是建設(shè)計(jì)算機(jī)網(wǎng)絡(luò)的第一步，是實(shí)現(xiàn)各種網(wǎng)絡(luò)協(xié)議的基礎(chǔ)，它對(duì)網(wǎng)絡(luò)的性能，系統(tǒng)的可靠性與通信費(fèi)用都有重大影響。拓?fù)湓谟?jì)算機(jī)網(wǎng)絡(luò)中即是指連接各結(jié)點(diǎn)的形式與方法；在網(wǎng)絡(luò)中的工作站和服務(wù)器等網(wǎng)絡(luò)單元抽象為 “點(diǎn)”；網(wǎng)絡(luò)中的電纜等抽象為 “線”。影響網(wǎng)絡(luò)性能、系統(tǒng)可靠性、通信費(fèi)用。

拓?fù)溥€分為：總線拓?fù)洹⑿切屯負(fù)洹h(huán)形拓?fù)錁湫瓮負(fù)湟约熬W(wǎng)狀拓?fù)洹＿@篇文章寫的案例就是總線拓?fù)渲械囊粋€(gè)分支，我們一步一步來搭建這個(gè)拓?fù)鋱D形。

示例圖片：

拓?fù)鋱D形組件介紹

拓?fù)鋱D形組件 ht.graph.GraphView (以下簡(jiǎn)稱 GarphView)是 HT 框架中 2D功能最豐富的組件，其相關(guān)類庫都在 ht.graph包下。 GarphView 具有基本圖形的呈現(xiàn)和編輯功能，拓?fù)涔?jié)點(diǎn)連線及自動(dòng)布局功能，電力和電信等行業(yè)預(yù)定義對(duì)象，具有動(dòng)畫渲染等特效， 因此其應(yīng)用面很廣泛，可作為監(jiān)控領(lǐng)域的繪圖工具和人機(jī)界面，可作為一般性的圖形化編輯工具，可擴(kuò)展成工作流和組織圖等企業(yè)應(yīng)用。

HT 框架的組件指的是可視化可交互的視圖控件，HT 框架基于 HTML5 技術(shù)，因此HT組件的可視化部分本質(zhì)就是 HTML 的元素， 大部分 HT 組件與 DataModel 數(shù)據(jù)模型綁定，用戶通過操作純 js 的語言即可驅(qū)動(dòng)可視化組件，這樣屏蔽了 HTML 底層圖形技術(shù)復(fù)雜性。 HT 對(duì) HTML5 技術(shù)封裝的目的在于提高開發(fā)效率和可維護(hù)性，但并不意味著不允許用戶直接操作 HTML 原生元素， 有 HTML5 開發(fā)經(jīng)驗(yàn)的程序員，在了解 HT 系統(tǒng)機(jī)制的前提下，大可運(yùn)用各種 HTML5 的技術(shù)對(duì) HT 組件做自定義擴(kuò)展。

搭建拓?fù)鋱D

我們就是用 ht.graph.GraphView 組件作為場(chǎng)景的，具體代碼只有兩行：

graphView

首先聲明變量，然后將這個(gè)組件實(shí)例變量添加進(jìn) body 體中。所有 HT 組件最根層都為一個(gè) div 組件，可通過組件的 getView() 函數(shù)獲得， 默認(rèn)和自定義交互事件監(jiān)聽一般添加在該 div 上getView().addEventListener(type, func, false)， 渲染層一般由 canvas 提供。 用戶可直接對(duì)根 div 和 canvas 層設(shè)置css背景等樣式， 也可以添加新的 HTML 組件到根 div 層上，作為 canvas 的兄弟組件一起呈現(xiàn)。 HT 組件一般都以設(shè)置 position 為 absolute 的絕對(duì)定位方式。HT 的組件一般都會(huì)嵌入BorderPane、SplitView 和 TabView等容器中使用，而最外層的 HT 組件則需要用戶手工將 getView()返回的底層 div 元素添加到頁面的 DOM元素中，這里需要注意的是，當(dāng)父容器大小變化時(shí)，如果父容器是 BorderPane和 SplitView 等這些 HT 預(yù)定義的容器組件，則 HT 的容器會(huì)自動(dòng)遞歸調(diào)用孩子組件 invalidate函數(shù)通知更新。但如果父容器是原生的 html元素， 則 HT 組件無法獲知需要更新，因此最外層的 HT 組件一般需要監(jiān)聽 window的窗口大小變化事件，調(diào)用最外層組件 invalidate函數(shù)進(jìn)行更新。

為了最外層組件加載填充滿窗口的方便性，HT 的所有組件都有 addToDOM 函數(shù)，其實(shí)現(xiàn)邏輯如下，其中 iv 是 invalidate的簡(jiǎn)寫：

addToDOM = function(){ var self = this,view = self.getView(), //獲取底層 div style = view.style;document.body.appendChild(view); //將組件底層 div 添加進(jìn) body 體中 style.left = '0';//ht 的組件默認(rèn)將 position 設(shè)置為 absolute 絕對(duì)定位style.right = '0';style.top = '0';style.bottom = '0'; window.addEventListener('resize', function () { self.iv(); }, false); }

接下來我們要引入“數(shù)據(jù)容器”的概念，顧名思義，就是裝載數(shù)據(jù)的容器，數(shù)據(jù)容器 ht.DataModel(以下簡(jiǎn)稱 DataModel)作為承載 Data 數(shù)據(jù)的模型，管理著 Data 數(shù)據(jù)的增刪以及變化事件派發(fā)， HT 框架所有組件都是通過綁定 DataModel，以不同的形式呈現(xiàn)到用戶界面，可以通過 view.getDataModel() （簡(jiǎn)寫為 view.dm()）方式獲取數(shù)據(jù)容器；同時(shí)組件也會(huì)監(jiān)聽 DataModel 模型的變化事件（view.getSelectionModel()，簡(jiǎn)寫為 view.sm()）， 實(shí)時(shí)同步更新界面數(shù)據(jù)信息，掌握了 DataModel 的操作就掌握了所有組件的模型驅(qū)動(dòng)方式。

我們要?jiǎng)?chuàng)建兩個(gè)節(jié)點(diǎn) ht.Node（繼承于 ht.Data 類），一個(gè)服務(wù)器，一個(gè)客戶端，中間連線兩條以及一條自環(huán)的連線，這些都是 Data 數(shù)據(jù)，都需要添加進(jìn) DataModel 數(shù)據(jù)容器中。但是我們得先創(chuàng)建這個(gè)數(shù)據(jù)節(jié)點(diǎn)，用 HT 只需要兩句話就能將節(jié)點(diǎn)添加進(jìn)數(shù)據(jù)容器中了，方法跟上面創(chuàng)建拓?fù)浣M件的方法很像，拓?fù)浣M件是添加進(jìn) body 體中，而節(jié)點(diǎn)是添加進(jìn)數(shù)據(jù)容器中：

var server = new ht.Node(); //創(chuàng)建“服務(wù)器”數(shù)據(jù)節(jié)點(diǎn) graphView.dm().add(server); //將節(jié)點(diǎn)添加進(jìn)數(shù)據(jù)容器 graphView.dm() 中

客戶端也是一樣的創(chuàng)建方式，節(jié)點(diǎn)名為 client。為了美觀，我給服務(wù)器和客戶端的節(jié)點(diǎn)都設(shè)置了圖片，設(shè)置圖片有兩種方式：

• 直接將圖片相對(duì)或絕對(duì)路徑，設(shè)置到數(shù)據(jù)模型的相應(yīng)屬性上, server.setImage('images/server.png')
• 先通過 ht.Default.setImage('server', 'images/server.png') 進(jìn)行注冊(cè)，再將注冊(cè)名稱設(shè)置到模型上 server.setImage('server')

直接設(shè)置路徑方式開發(fā)方便，無需提前注冊(cè)圖片，但數(shù)據(jù)模型序列化時(shí)圖片路徑占用內(nèi)存較多，將來圖片路徑變化后不利于管理維護(hù)，兩種方式都是正確的使用方式，可根據(jù)項(xiàng)目情況選中不同方式或混合使用。 如果采用 url 的路徑方式 HT 內(nèi)部會(huì)自動(dòng)加載圖片，并在 onload 之后自動(dòng)更新相應(yīng)的視圖組件。

HT 的框架下圖片被賦予了更廣泛的含義，HT提供了自定義 JSON 格式的矢量描述形式，以 HT 標(biāo)準(zhǔn)定義的 JSON 矢量格式， 也可以作為圖片進(jìn)行注冊(cè)和使用，HT 的矢量方式比傳統(tǒng)圖片格式更節(jié)省空間，縮放不失真，最強(qiáng)大之處在于矢量的所有圖形參數(shù)， 皆可與 Data 模型上的數(shù)據(jù)動(dòng)態(tài)綁定，具體說明參見[矢量手冊(cè)]，現(xiàn)在我這邊的講解還沒到這個(gè)步驟，感興趣的可以自行了解。

接著是創(chuàng)建兩個(gè)節(jié)點(diǎn)之間的連線，ht.Edge 類型用于連接起始和目標(biāo)兩個(gè) Node 節(jié)點(diǎn)，兩個(gè)節(jié)點(diǎn)間可以有多條 Edge 存在，也允許起始和目標(biāo)為同一節(jié)點(diǎn)。為同一節(jié)點(diǎn)的情況就是形成自環(huán)的情況啦~這里有三條連線，由于有兩條類似，我就只將直線連線和自環(huán)的連線代碼貼出來進(jìn)行解釋：

var edge = new ht.Edge(server, client); //創(chuàng)建連線節(jié)點(diǎn)，參數(shù)為起始節(jié)點(diǎn)和目標(biāo)節(jié)點(diǎn) graphView.dm().add(edge); //將連線節(jié)點(diǎn)添加進(jìn)數(shù)據(jù)容器中var cirEdge = new ht.Edge(server, server); //這個(gè)連線的起始節(jié)點(diǎn)和目標(biāo)節(jié)點(diǎn)都為同一個(gè)節(jié)點(diǎn)，形成自環(huán) graphView.dm().add(cirEdge);

連線節(jié)點(diǎn)也繼承于 Data 類，所以添加進(jìn)數(shù)據(jù)容器的方式也是一樣的。至于連線上面的字，則是通過 setStyle 方法來實(shí)現(xiàn)的。

HT 的數(shù)據(jù) Data 可分為三種屬性類型：

• get/set 或 is/set類型，例如 getName(0/setName('ht') 和 isExpanded()，用于常用屬性操作
• attr 類型，通過 getAttr(name)和 setAttr(key, value) 存取，該類型是 HT 預(yù)留給用戶存儲(chǔ)業(yè)務(wù)數(shù)據(jù)
• style 類型，通過 getStyle(name) 和 setStyle(key, value) 存取，該類型存儲(chǔ)著數(shù)據(jù)的默認(rèn)屬性

這里我是通過 style 類型來添加的文字說明，通過 ‘label’ 屬性設(shè)置顯示的文字：

edge.s({ //setStyle 的簡(jiǎn)寫'label': '請(qǐng)求', //設(shè)置文字'label.position': 3 //設(shè)置文字位置 });

最終顯示文字由 GraphView.getLabel 函數(shù)決定：

getLabel: function (data) {var label = data.getStyle('label'); //獲取 style 樣式中的 label 屬性的 valuereturn label === undefined ? data.getName() : label; }

上面還有一個(gè)文字位置，是 HT 封裝的位置，具體顯示位置如下：

其中 17 為中心位置，大家可根據(jù)這個(gè)位置自行調(diào)整看看效果，位置的具體說明請(qǐng)參考 [HT for Web 位置手冊(cè)]

至此，全部代碼解析完畢，下一節(jié)我會(huì)給大家介紹如何添加連線中的流動(dòng)哦，記得圍觀哦~

總結(jié)

以上是生活随笔為你收集整理的echarts力导向图节点连线动画_基于 HTML5 网络拓扑图的快速开发之入门篇（一）...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。