計算機網絡的拓撲結構是引用拓撲學中研究與大小，形狀無關的點、線關系的方法。把網絡中的計算機和通信設備抽象為一個點，把傳輸介質抽象為一條線，由點和線組成的幾何圖形就是計算機網絡的拓撲結構。網絡的拓撲結構反映出網中各實體的結構關系，是建設計算機網絡的第一步，是實現各種網絡協議的基礎，它對網絡的性能，系統的可靠性與通信費用都有重大影響。拓撲在計算機網絡中即是指連接各結點的形式與方法；在網絡中的工作站和服務器等網絡單元抽象為“點”；網絡中的電纜等抽象為“線”。影響網絡性能、系統可靠性、通信費用。

拓撲還分為：總線拓撲、星型拓撲、環形拓撲樹形拓撲以及網狀拓撲。這篇文章寫的案例就是總線拓撲中的一個分支，我們一步一步來搭建這個拓撲圖形。

示例圖片：

拓撲圖形組件 ht.graph.GraphView (以下簡稱 GarphView)是 HT 框架中 2D功能最豐富的組件，其相關類庫都在 ht.graph包下。 GarphView 具有基本圖形的呈現和編輯功能，拓撲節點連線及自動布局功能，電力和電信等行業預定義對象，具有動畫渲染等特效， 因此其應用面很廣泛，可作為監控領域的繪圖工具和人機界面，可作為一般性的圖形化編輯工具，可擴展成工作流和組織圖等企業應用。

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

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

graphView = new ht.graph.GraphView();
graphView.addToDOM();

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

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

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

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

我們要創建兩個節點 ht.Node（繼承於 ht.Data 類），一個服務器，一個客戶端，中間連線兩條以及一條自環的連線，這些都是 Data 數據，都需要添加進 DataModel 數據容器中。但是我們得先創建這個數據節點，用 HT 只需要兩句話就能將節點添加進數據容器中了，方法跟上面創建拓撲組件的方法很像，拓撲組件是添加進 body 體中，而節點是添加進數據容器中：

var server = new ht.Node();//創建“服務器”數據節點
graphView.dm().add(server);//將節點添加進數據容器 graphView.dm() 中

客戶端也是一樣的創建方式，節點名為 client。為了美觀，我給服務器和客戶端的節點都設置了圖片，設置圖片有兩種方式：

• 直接將圖片相對或絕對路徑，設置到數據模型的相應屬性上，server.setImage(‘images/server.png‘)
• 先通過 ht.Default.setImage(‘server‘, ‘images/server.png‘) 進行註冊，再將註冊名稱設置到模型上 server.setImage(‘server‘)

直接設置路徑方式開發方便，無需提前註冊圖片，但數據模型序列化時圖片路徑占用內存較多，將來圖片路徑變化後不利於管理維護，兩種方式都是正確的使用方式，可根據項目情況選中不同方式或混合使用。 如果采用 url 的路徑方式 HT 內部會自動加載圖片，並在 onload 之後自動更新相應的視圖組件。

HT 的框架下圖片被賦予了更廣泛的含義，HT提供了自定義 JSON 格式的矢量描述形式，以 HT 標準定義的 JSON 矢量格式， 也可以作為圖片進行註冊和使用，HT 的矢量方式比傳統圖片格式更節省空間，縮放不失真，最強大之處在於矢量的所有圖形參數， 皆可與 Data 模型上的數據動態綁定，具體說明參見矢量手冊，現在我這邊的講解還沒到這個步驟，感興趣的可以自行了解。

接著是創建兩個節點之間的連線，ht.Edge 類型用於連接起始和目標兩個 Node 節點，兩個節點間可以有多條 Edge 存在，也允許起始和目標為同一節點。為同一節點的情況就是形成自環的情況啦~這裏有三條連線，由於有兩條類似，我就只將直線連線和自環的連線代碼貼出來進行解釋：

var edge = new ht.Edge(server, client);//創建連線節點，參數為起始節點和目標節點
graphView.dm().add(edge);//將連線節點添加進數據容器中

var cirEdge = new ht.Edge(server, server);//這個連線的起始節點和目標節點都為同一個節點，形成自環
graphView.dm().add(cirEdge);

連線節點也繼承於 Data 類，所以添加進數據容器的方式也是一樣的。至於連線上面的字，則是通過 setStyle 方法來實現的。

HT 的數據 Data 可分為三種屬性類型：

• get/set 或 is/set類型，例如 getName(0/setName(‘ht‘) 和 isExpanded()，用於常用屬性操作
• attr 類型，通過 getAttr(name)和 setAttr(key, value) 存取，該類型是 HT 預留給用戶存儲業務數據
• style 類型，通過 getStyle(name)和 setStyle(key, value) 進行操作，GraphView 上圖元樣式由該類型屬性控制

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

edge.s({//setStyle 的簡寫
    ‘label‘: ‘請求‘,//設置文字
    ‘label.position‘: 3//設置文字位置
});

最終顯示文字由 GraphView.getLabel 函數決定：

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

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

其中 17 為中心位置，大家可根據這個位置自行調整看看效果，位置的具體說明請參考 HT for Web 位置手冊。學習web前端:http://www.zhihaijiangku.com

前端入門：快速開發基於 HTML5 網絡拓撲圖應用