應用圖撲 HT for Web 搭建拓撲關系圖

拓撲結構在計算機網絡設計和通信領域中非常重要，因為它描述了網絡中的設備（即“點”）如何相互連接（即通過“線”）。這種結構不僅涉及物理布局，即物理拓撲，還可以涉及邏輯或虛擬的連接方式，即邏輯拓撲。

圖撲軟件自研 HT for Web 產品曾參與搭建了眾多拓撲可視化解決方案。如機房通信拓撲可視化，實現通過圖形圖像直觀展示機房內部網絡設備、服務器、存儲設備以及之間連接關系的技術。幫助 IT 管理員和網絡工程師更加直觀地理解機房的網絡結構，便于故障排查、網絡優化和規劃擴展。

在 HT 中，ht.Node 可充當拓撲圖中的“點”角色，ht.Node 上可顯示圖片圖標，這使得創建拓撲圖時能夠直觀地表示每一個“點”的特征。至于拓撲圖中的“線”，即用于體現兩個節點之間關系的元素，可由 ht.Edge 類型承擔這一任務。ht.Edge用于連接起始和目標兩個節點，兩個節點間可以有多條ht.Edge存在，也允許起始和目標為同一節點。

在搭建 HT 拓撲圖前，我們需要先創建一個 HT 的 2D 視圖：

const dm = new ht.DataModel(); // 創建一個數據模型const g2d = new ht.graph.GraphView(dm); // 創建一個 2D 視圖g2d.addToDOM(); // 將 2D 視圖添加到 body 中dm.setBackground('rgb(240,237,237)'); // 設置背景

2D 視圖還可按照需求開啟樹層次渲染：

dm.setHierarchicalRendering(true);

2D 視圖創建完成之后就可以創建“點”和“線”了：

const node1 = createNode('symbols/電信/icon_交換機.json', { x: 0, y: 0 }, "交換機");const node2 = createNode('symbols/電信/icon_路由.json', { x: 300, y: 0 }, "路由");createEdge(node1, node2);function createNode(icon, position, name) { ? ? const node = new ht.Node(); // 創建一個 ht.Node 節點 ? ? node.s({ ? ? ? ? 'label': name, ? ? ? ? 'label.color': "#fff" ? ? }); ? ? node.setImage(icon); ? ? node.p(position); ? ? node.setSize({ width: 100, height: 100 }); ? ? dm.add(node); // 將節點加到數據模型中 ? ? return node;}function createEdge(source, target, color, reverse) { ? ? const edge = new ht.Edge(source, target); // 創建一個 ht.Edge ? ? dm.add(edge); // 將連線節點加到數據模型中 ? ? return edge;}

運行代碼后的效果：

復雜連線

以上展示了一個簡潔的示例，直觀地展現了如何在圖撲自研 HT for Web 中創建節點并將它們通過連線相連。實際應用中的情形往往更為復雜，需要根據實際數據構建拓撲結構。在這個過程中，核心步驟依舊是首先創建 ht.Node 實例以表示各個節點，再利用 ht.Edge 實例來實現節點之間的連接。接下來，讓我們通過復雜一些的示例來演示。

創建節點

為了批量創建節點并方便管理節點數據，示例中定義了結構化的數據格式，并將數據存儲在一個 JSON 文件中，再通過 ht.Default.xhrLoad() 去獲取到 JSON 文件中的數據。獲取到數據后就可批量創建節點。

在實際的運用場景中，也可以通過任何 web 端通訊方式 HTTP/AJAX、WebSocket 去獲取數據。

equipment.json 文件中定義的數據格式：

[ ? ?{ ? ? ? ?"name": "核心交換機1", // 設備名稱 ? ? ? ?"code": "EQ_ASBB1425", // 設備編碼（唯一標識） ? ? ? ?"icon": "symbols/user/900-word/電信拓撲圖標/icon_核心交換機.json", // 設備 icon// 設備在圖紙中的位置"size": 60, // 節點大小 ? ? ? ?"position": { ? ? ? ? ? ?"x": 0, ? ? ? ? ? ?"y": 100 ? ? ? ?} ? ?}, ? ?{ ? ? ? ?"name": "核心交換機2", ? ? ? ?"code": "EQ_ASBB1478", ? ? ? ?"icon": "symbols/user/900-word/電信拓撲圖標/icon_核心交換機.json", ? ? ? ?"position": { ? ? ? ? ? ?"x": 200, ? ? ? ? ? ?"y": 0 ? ? ? ?} ? ?}, ? ?{ ? ? ? ?"name": "服務器1", ? ? ? ?"code": "EQ_BCGJ2121", ? ? ? ?"icon": "symbols/user/900-word/電信拓撲圖標/空白服務器.json", ? ? ? ?"position": { ? ? ? ? ? ?"x": 200, ? ? ? ? ? ?"y": 250 ? ? ? ?} ? ?}, ? ...]

獲取到數據并批量創建節點：

ht.Default.xhrLoad('./equipment.json', function (json) { ? ? ? const data = ht.Default.parse(json); ? ? ? data.forEach((item) => { ? ? ? ? ? ? createNode(item); ? ? ? ?})})function createNode(data) { ? ? ? ?const node = new ht.Node(); ? ? ? ?node.setTag(data.code); // 設置節點唯一標識 ? ? ? ?node.setImage(data.icon); ? ? ? ?node.p(data.position); ? ? ? ?node.s('2d.movable', false); // 禁止移動 ? ? ? ?node.setSize({ width: data.size || 150, height: data.size || 150 }); ? ? ? ?dm.add(node); ? ? ? ? return node;}

創建連線

與節點數據相同，示例中定義了連線對應格式，并且也是存儲在一個 JSON 文件中，再通過 ht.Default.xhrLoad() 獲取數據。JSON 文件中定義了連線中最重要的幾個因素：起始節點、目標節點、連線顏色。

[ ? ?{ ? ? ? ?"source": "EQ_ASBB1425", // 起始節點的唯一標識 ? ? ? ?"target": "EQ_BCGJ2121", // 結束節點的唯一標識 ? ? ? ?"color": "rgb(0,199,7)" // 連線顏色 ? ?}, ? ?{ ? ? ? ?"source": "EQ_ASBB1425", ? ? ? ?"target": "EQ_BCGJ2131", ? ? ? ?"color": "rgb(0,199,7)"},...]

獲取數據并且批量創建連線，這一步需要在創建節點之后執行：

ht.Default.xhrLoad('./connectData.json', function (json) { ? ? ?const connectData = ht.Default.parse(json); ? ? ?connectData.forEach((item) => { ? ? ? ? ? ?createEdge(item); ? ? ?})})function createEdge(data) { ? ?const source = dm.getDataByTag(data.source); ? ?const target = dm.getDataByTag(data.target); ? ?const edge = new ht.Edge(source, target); ? ?edge.s({ ? ? ? ?"edge.color": data.color || "rgb(0,199,7)", ? ? ? ?"edge.width": 4, ? ? ? ?"shadow2.offset.x": -4, ? ? ? ?"shadow2.offset.y": 7, ? ? ? ?"shadow2": true, ? ? ? ?"shadow2.color": "rgba(0,0,0,0.18)",})dm.add(edge); ? ?dm.moveToTop(edge); // 將節點移動至頂部 ? ?return edge;}

到這里，基本上整個拓撲的效果都已經展示出來了，但是可能還存在一些問題。如終端路由之間的連線被服務器擋住了，可能會被認為是路由 1—服務器 1—服務器 2—路由 2 這樣的連接。

這種情況下，就可以采用其他的連線方式。ht.Edge 提供了多種的連線方式，可以通過 edge.s(‘edge.type’, 連接方式) 進行設置。下面展示幾種不同的連接方式：

1.彎曲：edge.s(‘edge.type’, ‘flex2’)

2.正交：edge.s(‘edge.type’, ‘ortho2’)

3.先水平后垂直：edge.s(‘edge.type’, ‘h.v2’)

4.先水平后垂直：edge.s(‘edge.type’, ‘v.h2’)

......

ht.Edge 還有很多種的連線方式，這里就先介紹以上幾種方式。

在這個示例內，兩個路由之間的連線需要跨域多個其他的連線，為了使得連線更加美觀易懂，于是我就這條連線采用了?points 的連線方式，這種方式有極高的靈活性，可在連線路徑上自由地添加控制點，從而實現非常多樣化的效果。

points 類型的連線，有兩個非常重要的屬性：

edge.points：控制點信息；
edge.segments：用來標識在繪制時如何使用 points 數組中的頂點信息。

將示例中這條連線的連線類型改為 points，并設置上相應的屬性：

edge.s({ ? ?'edge.type': 'points', ? ?'edge.center': true, ? ?'edge.points': [ ? ? ? ?{ "x": 680, "y": 105 }, ? ? ? ?{ "x": 490, "y": 200 }, ? ? ? ?{ "x": 470, "y": 200 }, ? ? ? ?{ "x": 410, "y": 230 }, ? ? ? ?{ "x": 400, "y": 250 }, ? ? ? ?{ "x": 360, "y": 270 }, ? ? ? ?{ "x": 340, "y": 270 }, ? ? ? ?{ "x": 260, "y": 310 }, ? ? ? ?{ "x": 250, "y": 330 }, ? ? ? ?{ "x": 80, "y": 415 } ? ?], ? ?'edge.segments': [1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2]});

使用以上 points 連線類型實現的效果：

增加背景和裝飾

可創建一些 ht.Shape 節點作為背景裝飾，突出顯示特定的設備區域。

createShape([ ? ?{ x: -100, y: 130 }, ? ?{ x: 230, y: -50 }, ? ?{ x: 340, y: 15 }, ? ?{ x: 10, y: 195 }, ? ?{ x: -100, y: 130 }], [1, 2, 2, 2, 5])createShape([ ? ?{ x: -155, y: 354 }, ? ?{ x: 575, y: -30 }, ? ?{ x: 805, y: 110 }, ? ?{ x: 60, y: 510 }, ? ?{ x: -155, y: 355 },], [1, 2, 2, 2, 5]);createShape([ ? ?{ x: 300, y: 470 }, ? ?{ x: 660, y: 275 }, ? ?{ x: 805, y: 350 }, ? ?{ x: 435, y: 550 }, ? ?{ x: 300, y: 470 },], [1, 2, 2, 2, 5])function createShape(points, segments) { ? ?const shape = new ht.Shape(); ? ?shape.setPoints(points); ? ?shape.setSegments(segments); ? ?shape.s({ ? ? ? ?'shape.background': "#fff", ? ? ? ?"shape.border.color": "rgba(13,46,79,0.67)", ? ? ? ?"shape.border.width": 0.5, ? ?}) ? ?dm.add(shape); ? ?dm.moveToTop(shape); ? ?return shape;}

添加背景后的效果如下：

增加一些裝飾的節點，這些節點本質上也都是 ht.Node，只是顯示了不同的圖標/圖片，效果如下：

添加箭頭

在復雜的網絡拓撲中，連線上常常需要表示數據流動方向。在使用圖撲 HT 繪制連線時，ht.Edge 提供了 icons 屬性，通過 icons 屬性，可在 ht.Edge 上定義一系列圖標并設置它們在連線上的位置。

在設置 icons 屬性前，需要先注冊好圖標：

ht.Default.setImage('toArrow', { ? ?width: 40, ? ?height: 20, ? ?comps: [ ? ? ? ?{ ? ? ? ? ? ?type: 'shape',points: [5, 2, 10, 10, 5, 18, 20, 10], ? ? ? ? ? ?closePath: true, ? ? ? ? ? ?background: 'rgb(0,199,7)', ? ? ? ? ? ?borderWidth: 1, ? ? ? ? ? ?borderColor: 'rgb(0,199,7)', ? ? ? ? ? ?gradient: 'spread.vertical' ? ? ? ?} ? ?]});ht.Default.setImage('fromArrow', { ? ?width: 12, ? ?height: 12, ? ?comps: [ ? ? ? ?{ ? ? ? ? ? ?type: 'circle', ? ? ? ? ? ?rect: [1, 1, 10, 10], ? ? ? ? ? ?background: 'rgb(0,199,7)' ? ? ? ?} ? ?]});

在 ht.Edge 上設置 icons：

edge.addStyleIcon("fromArrow", { ? ? position: 15, // 圖標位置 ? ? keepOrien: true, // 圖標是否默認自動調整方向以保持最好的閱讀效果 ? ? names: ['fromArrow']});edge.addStyleIcon("toArrow", { ? ? position: 19, ? ? keepOrien: true, ? ? names: ['toArrow']});

設置 icons 之后的效果：

流動動畫

在圖撲自研產品 HT for Web 中，使用 ht-flow.js 插件，能夠為 ht.Edge 連線添加流動動畫效果。這種效果可用于表示數據傳輸、能源流動或任何類型的動態連接。使用 ht-flow.js 插件實現的流動效果配置起來也十分簡單，正確引入 ht-flow.js 插件后，使用 g2d.enableFlow(60); 開啟流動，再在 ht.Edge 上設置相應的流動屬性即可。

ht.Edge 配置流動效果的一些屬性說明：

flow：布爾值，設置為 true 以啟用流動效果。
flow.count：控制流動組的個數，默認為 1。
flow.step：控制流動的步進，默認為 3。
flow.element.count: 每個流動組中的元素的個數，默認為 10。
flow.element.space: 流動組中元素的間隔，默認為 3.5。
flow.element.image: 字符串類型，指定流動組中元素的圖片，圖片需要提前通過 ht.Default.setImage 注冊。目前支持設置。
flow.element.background: 流動組中元素的背景顏色，默認為 rgba(255, 255, 114, 0.4)。
flow.element.shadow.begincolor: 字符串類型，表示流動組中的元素的漸變陰影的中心顏色，默認為 rgba(255, 255, 0, 0.3)。
flow.element.shadow.endcolor: 字符串類型，表示流動組中的元素的漸變陰影的邊緣顏色，默認為 rgba(255, 255, 0, 0)。
flow.element.shadow.visible：流動陰影是否可見。
flow.begin.percent：開始的位置，值為 0 - 1，默認是 0。
flow.element.autorotate：是否自動朝向，根據連線的角度自動朝向。

在示例的 ht.Edge 上設置流動屬性：

edge.s({ ? ? ? ?"flow": true, ? ? ? ?"flow.element.background": "rgba(240, 225, 19, 0.5)", ? ? ? ?"flow.element.shadow.begincolor": "rgba(240, 225, 19, 0.5)", ? ? ? ?"flow.element.shadow.endcolor": "rgba(240, 225, 19, 0)", ? ? ? ?"flow.element.count": 1 });

設置完成后的效果：

在更為復雜的場景中，僅僅依賴簡單的樣式配置難以滿足設計需求，為此 ht-flow.js 提供了 flow.element.image 屬性，該屬性支持將流動的元素設置為圖片或圖標，還支持設置為多個圖片/圖標流動的效果。

在流動上設置圖標，需要先注冊圖標：

ht.Default.setImage('dataIcon1', { ? ?"width": 50, ? ?"height": 50, ? ?"comps": [ ? ? ? ?{ ? ? ? ? ? ?"type": "shape", ? ? ? ? ? ?"background": "rgb(125,195,125)", ? ? ? ? ? ?"borderColor": "#979797", ? ? ? ? ? ?"points": [ ? ? ? ? ? ? ? ?2.94441, ? ? ? ? ? ? ? ?16.1039, ? ? ? ? ? ? ? ?26.41008, ? ? ? ? ? ? ? ?16.1039, ? ? ? ? ? ? ? ?26.41008, ? ? ? ? ? ? ? ?4.28571, ? ? ? ? ? ? ? ?47.05559, ? ? ? ? ? ? ? ?25.58442, ? ? ? ? ? ? ? ?27.23783, ? ? ? ? ? ? ? ?45.71429, ? ? ? ? ? ? ? ?27.23783, ? ? ? ? ? ? ? ?33.84863, ? ? ? ? ? ? ? ?2.94441, ? ? ? ? ? ? ? ?33.84863, ? ? ? ? ? ? ? ?2.94441, ? ? ? ? ? ? ? ?16.1039 ? ? ? ? ? ?] ? ? ? ?} ? ?]})ht.Default.setImage('dataIcon2', { ? ?"width": 50, ? ?"height": 50, ? ?"comps": [ ? ? ? ?{ ? ? ? ? ? ?"type": "shape", ? ? ? ? ? ?"background": "#32D3EB", ? ? ? ? ? ?"borderColor": "#979797", ? ? ? ? ? ?"points": [ ? ? ? ? ? ? ? ?2.94441, ? ? ? ? ? ? ? ?16.1039, ? ? ? ? ? ? ? ?26.41008, ? ? ? ? ? ? ? ?16.1039, ? ? ? ? ? ? ? ?26.41008, ? ? ? ? ? ? ? ?4.28571, ? ? ? ? ? ? ? ?47.05559, ? ? ? ? ? ? ? ?25.58442, ? ? ? ? ? ? ? ?27.23783, ? ? ? ? ? ? ? ?45.71429, ? ? ? ? ? ? ? ?27.23783, ? ? ? ? ? ? ? ?33.84863, ? ? ? ? ? ? ? ?2.94441, ? ? ? ? ? ? ? ?33.84863, ? ? ? ? ? ? ? ?2.94441, ? ? ? ? ? ? ? ?16.1039 ? ? ? ? ? ?] ? ? ? ?} ? ?]});在 ht.Edge 上設置屬性：edge.s({ ? ?"flow": true, ? ?"flow.element.count": 2, ? ?"flow.element.image": ["dataIcon1", "dataIcon2"], ? ?"flow.element.max": 20, ? ?"flow.element.min": 20, ? ?"flow.element.shadow.visible": false, ? ?"flow.element.space": 50, ? ?"flow.element.autorotate": true});