HT 是啥：Everything you need to create cutting-edge 2D and 3D visualization.

這口號是當年心目中的產品方向，接著就朝這個方向慢慢打磨，如今 HT 算是達到了這樣的效果，談不上用盡洪荒之力，但我們對產品結果很滿意，特別是 HT 的用戶手冊，將例子和文檔無縫融合一體，小小 10 來兆開發包居然包含了四十五份手冊，數百個活生生的 HTML5 例子，還沒體驗過的同學可以點擊 http://www.hightopo.com/guide... HT 手冊入口玩一玩。

這樣綜合并可搜索的手冊入口居然還常被問及 HT 的 Demo 在哪里？只能怪這些年深入人心的極致用戶體驗理念，把人慣得包括很多程序員都如此之“懶”，當然也怪我們沒把用戶體驗的最后一公里做到位，于是最近 wangyinlong 同學人工例子抓圖，將數百個手冊例子進行了歸類整理，最終形成了方便大家直觀查找所有 HT 例子的頁面：http://www.hightopo.com/demos...

很明顯 http://www.hightopo.com/demos... 相比 http://www.hightopo.com/guide... 頁面，對于 HT 老用戶包括我們自己做技術支持，都感覺查找例子更直觀方便，但對于 HT 初學者，面對這一堆數百個涵括通用組件、網絡拓撲圖組件、3D 組件、矢量圖形、各種編輯器等等五法八門的 HTML5 例子盛宴，往往無從下手，為此我打算寫個《數百個HTML5例子學習HT圖形組件》的系列文章，引導各種電力、電信、工控 SCADA 等不同行業領域用戶，學習使用 HT 這全套一站式 HTML5 圖形組件。

拓撲圖組件作為最典型的 HT 客戶需求應用，自然是首篇登場。

HT 的拓撲圖組件主要基于 HTML5 的 Canvas 技術，拓撲圖是電力和電信的叫法，但該組件遠不僅僅用于呈現節點和連線，在 HT 里面我們沒把該組件狹義的稱為 Topology、Network 或 Diagram，我們將該組件類名稱為更通用的 GraphView，只要你有想象力，你可以用拓撲圖組件做出任何其他組件，對于一些需求你想不出來用啥組件實現時，往往就是拓撲圖組件需要站出來發力了：

可能大部分不在游戲領域混的同學會好奇上面兩張圖是什么鬼？這兩張是開源的 HTML5 游戲引擎工具 QICI Engine （https://github.com/qiciengine...）游戲工程抓圖，有興趣的同學可到 Github 上下載試玩。

QICI Engine：A free JavaScript game engine library with a web-based comprehensive suite of toolset for making HTML5 games.

整個 QICI Engine 的 HTML5 游戲引擎編輯工具就是基于 HT 組件定制開發出來的，上圖刀塔場景的資源管理器就是圖標可縮放，圖集可展開合并，可縮小變成樹層次的 GraphView 拓撲圖，而第二張的動作編輯器、曲線編輯器等等部分也都是 GraphView 的身影。

現在你應該能理解為什么我說拓撲圖組件幾乎可作出任何其他組件，當然定制其他組件是需要時間精力成本的，否則也不需要有其他組件的存在意義了，開發 QICI Engine 產品是另一個故事，今天就先不展開了。HTML5 游戲已經不是啥新鮮玩意兒了，但游戲開發工具完全基于 HTML5 可運行在瀏覽器還是有點意思的，下圖附上阿明同學的得意之作《城市消消樂》抓圖，有興趣的可玩之：http://engine.zuoyouxi.com/ga...

回到今天的主題，學習使用拓撲圖，第一步就是: Get Your Hands Dirty，哪怕你不熟悉 HTML，直接照葫蘆畫瓢按 http://www.hightopo.com/guide... 的代碼構建出兩個節點三條連線：

// 創建數據模型容器 var dataModel = new ht.DataModel();// 創建拓撲圖組件 var graphView = new ht.graph.GraphView(dataModel);// 創建一個起始節點，設置名字和位置屬性，添加到數據模型容器 var source = new ht.Node(); source.setName('source'); source.setPosition(100, 70); dataModel.add(source);// 創建一個結束節點，設置名字和位置屬性，添加到數據模型容器 var target = new ht.Node(); target.setName('target'); target.setPosition(260, 70); dataModel.add(target);// 創建一條連線，設置起始和結束節點，添加到數據模型容器 var edge = new ht.Edge(); edge.setSource(source); edge.setTarget(target); dataModel.add(edge);

相信上面的代碼很直觀就能理解拓撲圖構建的原理，很多人會問 HT 如何通訊獲取數據，對后端有限制嗎？HT 只是客戶端組件，不介入到后臺通訊，因此客戶可以采用任何后臺系統，Java、C++、PHP、Node.js 等等，可采用任何通訊方式 HTTP/AJAX、WebSocket 等，采用任何數據格式 XML、JSON 或 TXT 等，只需要最后用戶根據自己格式的數據內容，采用 HT 圖形庫提供的標準 API 接口創建相應的節點、連線等圖元，設置相關的屬性信息，即可實現圖形呈現，所以 HT 組件對后臺和通訊方式沒有任何要求。

以上的例子對于名稱和位置的設置都是 demo 中隨意設置的值，真正的系統用戶一般會通過后臺數據庫查詢，然后根據業務數據內容構建圖元并設置相應的屬性。你會發現雖然在構建拓撲圖，但你80%的代碼都在和 Data 和 DataModel 打交道，這兩個又是什么鬼？其實絕大部分 HT 的客戶開發完整個系統都沒必要認真學習《HT for Web 數據模型手冊》，也不用管 HT 采用的是啥 MVC/MVP/MVVM 框架，需要深入了解的可閱讀 http://www.hightopo.com/guide... 手冊

簡單說 Data 就是 HT 的最小數據單元，對于 GraphView 組件可以說是一個圖元，一個節點或一條連線；對于 Tree 組件可以說是一個樹節點；對于 Table 組件可以說是一行記錄，這些 Data 圖元需要添加到 DataModel 的數據容器中，而 HT 的所有視圖組件 GraphView、List、Tree、Table 甚至是 3D 組件 Graph3dView 都會綁定一個數據容器，這些視圖都會監聽數據容器的事件變化，進行自身組件的刷新顯示工作，這些事件包括圖元的屬性變化、圖元的增刪，還有很重要的一個關系，就是圖元的父子關系變化。

提到父子關系讓我們來看看一個比較綜合性的小例子：http://www.hightopo.com/guide...

// 創建數據容器 dataModel = new ht.DataModel();// 創建拓撲圖、屬性頁、列表、樹、表格、樹表組件 graphView = new ht.graph.GraphView(dataModel); propertyView = new ht.widget.PropertyView(dataModel); listView = new ht.widget.ListView(dataModel); treeView = new ht.widget.TreeView(dataModel); tablePane = new ht.widget.TablePane(dataModel); treeTablePane = new ht.widget.TreeTablePane(dataModel);// 創建組圖元，添加孩子節點，加入數據容器 group = new ht.Group(); group.setName('HT for Web ' + ht.Default.getVersion()); group.addChild(hello); group.addChild(world); group.addChild(edge); dataModel.add(group);

這個例子增加了設置父子關系的代碼，同時有更多的組件（拓撲圖、屬性頁、列表、樹、表格、樹表組件）綁定了同一個數據模型 DataModel，但用戶的代碼依然主要在 Data 和 DataModel 上的操作，這也是 HT 架構設計的優勢，用戶使用更多組件并沒有增加新的學習成本，只要掌握的 DataModel 的基本操作，更多的組件也是如此。

雖然圖元屬性設置、增加變化甚至是選中操作都可以通過 DataModel 搞定，但并不意味著 DataModel 是萬能的，有些需求還是需要通過 View 視圖進行。例如很多基本需求是雙擊圖元要做些業務處理，如何監聽呢？怎么從 Node 上沒找到啥 onClick 之類的接口？這可以從《HT for Web 入門手冊》的交互章節找到答案：http://www.hightopo.com/guide...

graphView.addInteractorListener(function (e) {if(e.kind === 'clickData'){console.log(e.data + '被單擊');}else if(e.kind === 'doubleClickData'){console.log(e.data + '被雙擊');} });

如果你還想打破砂鍋問到底為什么不直接在 Data 或 DataModel 上提供交互處理，Data 數據是可以給很多 View 視圖共享用的，DataModel 甚至都不知道 View 視圖的存在，他們只會派發模型變化事件，而 View 通過監聽模型的變化進行相應的更新處理，HT 的模型架構上極其類似 Facebook React https://facebook.github.io/re... 的 Flux 單向流設計理念：http://facebook.github.io/flu...

HT 的 DataModel 相當于 Flux 中的 Store 模塊，拓撲圖、樹和表格這些自然對應 View 模塊，一般發起 Action 動作就是后臺數據變化，或者用戶手工輸入表格屬性值之類，但最終都不是直接修改 View，都是從 Data/DataModel/Store 發起修改，然后數據模型派發事件給所有 View，最后 View 根據不同事件做相應的處理。

有興趣的同學可以打開 http://www.hightopo.com/guide... 控制臺，輸入如圖的代碼體驗下實時修改數據模型的效果：

剛才的例子我們提到了一個 Group 類型，這個類型圖元節點在 GraphView 上顯示成了組合效果，可雙擊展開合并，可跟隨著孩子節點的位置大小變化和自適應變動，除了 Node、Edge、Group 外，HT 還提供了 Shape、Polyline、Grid、SubGraph 等多種圖元類型，這些圖元類型都具是有針對性的展示效果，以滿足各種行業的基本圖元需求：http://www.hightopo.com/guide...

對于連線 Edge，HT 還提供了自定義走向的擴展機制，并提供了相應的預制擴展連線類型插件，參見《HT for Web 連線類型手冊》http://www.hightopo.com/guide...

當然預定義的類型再多也不可能滿足千奇百怪的行業圖元需求，這是你該閱讀下《HT for Web 矢量手冊》http://www.hightopo.com/guide... 的時候了，關于矢量的介紹以前寫過兩篇老文供大家參考：《HT全矢量化的圖形組件設計》和《HT圖形組件設計之道（二）》

以上這個例子你可以在這里玩：http://www.hightopo.com/demo/... 。相關視頻：http://v.youku.com/v_show/id_...

另外 HT 的矢量內置了 Chart 類型，矢量內置的 Chart 不同于傳統獨立的 Chart 組件，傳統的 Chart 是獨立的視圖 DOM 組件，但 HT 的拓撲是 Cavans 方式繪制，因此沒法實現 Chart 組件和普通圖元的不同層次融合顯示，但矢量的 Chart 類型倒是完美的實現了這樣的融合，很多工控應用的客戶會將矢量 Chart 與拓撲圖元素融合一體，可參見《基于HT for Web的Web SCADA工控移動應用》http://www.hightopo.com/blog/... 一文中 HT 的 Web SCADA 應用案例

當然你也可以把 HT 與 百度 ECharts 進行整合，只要是 HTML 圖形組件就可以整合到 HT 的布局容器中，可參考《ECharts整合HT for Web的網絡拓撲圖應用》，此例子將 ECharts 整合 HT 拓撲圖做了告警統計的圖表呈現效果：

除了混合第三方圖形組件庫外，HT 圖撲還能嵌入 SVG 的圖片進行矢量呈現，參見《繪制SVG內容到Canvas的HTML5應用》

在某些特殊的情況下用戶還可以將 HTML 元素嵌入作為普通的 Node 節點，并支持拓撲圖的縮放、改變大小等等操作效果，可參考《HT for Web HtmlNode 手冊》http://www.hightopo.com/guide... ，這種結合有一定的局限性，不到萬不得已不建議用戶使用該插件。

HT 提供了各種豐富的通用組件，以及復雜的拓撲圖編輯交互插件 http://www.hightopo.com/guide...，用戶分分鐘可以快速開發出各種各樣的編輯器工具。入門手冊中也有個 http://www.hightopo.com/guide... 簡單的編輯器例子，教用戶如何自定義創建節點、連線和多邊形的示例教材，學習自定義拓撲圖交互可從此例子入手。

甚至可以像 http://www.hightopo.com/guide... 這個例子那樣，關閉掉拓撲圖的所有默認交互，直接通過添加原生的 HTML DOM 的事件監聽進行自定義交互邏輯處理。

構建出拓撲圖后很多人關系的是如何實現動畫，動畫從本質上來說就是在一定的時間點上驅動圖元的參數變化，例如大小、顏色、粗細包括可見不可見等來實現各種動畫效果，而 HT 本來所有圖元都是數據驅動，用戶隨時可以修改 Data 上的任何屬性，因此隨便起個定時器 windwo.setInterval 不斷改變圖元屬性值即可實現動畫效果，但為了方便客戶 HT 還提供了諸多方便函數和插件。

例如 http://www.hightopo.com/guide... 中的 ht.Default.startAnim 函數，該函數支持 Frame-Based 和 Time-Based 兩種方式的動畫，為了理解其中的 Easing 參數可參見 《透過WebGL 3D看動畫Easing函數本質》文章和 http://www.hightopo.com/guide... 這個例子

如果是持續周期的變化可采用《HT for Web 調度手冊》http://www.hightopo.com/guide... 的調度插件：

如果你喜歡 https://github.com/tweenjs/tw... 的 chaining 函數方式串聯多種動畫，可采用《HT for Web 動畫手冊》http://www.hightopo.com/guide... 的插件。對于連線流動、虛線流動等常見連線動畫需求 HT 已經封裝了相應的插件《HT for Web 流動手冊》和《HT for Web 虛線流動手冊》

HT 的拓撲圖的節點位置都是邏輯坐標，并非 GIS 的地理信息經緯度坐標，但這并不妨礙 HT 的拓撲圖可以和百度地圖、GoogleMap、OpenLayers 等第三方 GIS 地圖引擎進行整合呈現，參見《百度地圖、ECharts整合HT for Web網絡拓撲圖應用》，該文將 HT 拓撲圖、百度地圖、ECharts、HT 連線流動和面板等插件做了個綜合的呈現展示效果：http://www.hightopo.com/demo/...

拓撲圖做完呈現需求效果之后，常會有拓撲圖紙數據需要保存的需求，這個很簡單，DataModel 內置將所有數據轉換成 JSON 的功能，非常方便用戶將拓撲圖內容進行導入導出工作，一般用戶會將 JSON 數據字符串化并進行壓縮，然后存到后臺數據庫或文件系統，運行時再進行加載導入，這方面請參見《HT for Web 序列化手冊》，其實 HT 的可序列化功能并非為拓撲圖組件特殊設計，本質是整個 DataModel 數據層就可以序列化，所以意味著你可以存儲表格內容、樹層次關系包括 3D 場景。

關于客戶端存儲數據方面還可參考這篇文章《HTML5 Web 客戶端五種離線存儲方式匯總》

http://www.hightopo.com/guide...

另外 HT 的數據綁定功能是非常贊的特點，往往讓你意想不到的寥寥幾行代碼即可實現很有趣的功能，例如下面這個例子，實現一個 Chart 圖元在拓撲圖中，用戶看看拖拽圖元實現餅圖旋轉，雙擊切換是否中空，只有寥寥十來行代碼即可實現，我是想不到如何還能更簡單實現這樣的功能：http://www.hightopo.com/guide...

對于電信網管客戶常常有告警的特殊行業呈現需求，這方面 HT 也提供了針對電信 OSS/BSS 網管拓撲圖應用的《HT for Web 電信擴展手冊》http://www.hightopo.com/guide... 插件，針對圖元告警渲染、告警傳播等提供了特殊定制化的展示效果：http://www.hightopo.com/guide...

雖然 HT 的拓撲圖組件可以承載萬以上的拓撲圖元量，但如果這些拓撲圖元都通過手工布局那是不可思議的工作量，因此 HT 為拓撲圖組件提供的多種自動布局引擎算法，例如彈力布局、圓形布局、星型布局和層次布局等多種樣式效果

《HT for Web 自動布局手冊》http://www.hightopo.com/guide...

《HT for Web 彈力布局手冊》http://www.hightopo.com/guide...

HT 還為拓撲圖組件提供了貼心的鷹眼 Overview 插件（http://www.hightopo.com/guide...），整合上 HT 的 Panel 面板插件（http://www.hightopo.com/guide...）是用戶常見的融合拓撲和鷹眼的展示方式，鷹眼具有實時同步拓撲內容，可滾輪縮放，點擊定位，拖拽平移等操作方式，非常方便用戶瀏覽導航大數據量拓撲圖的應用場景。

拓撲圖篇就寫這些吧，HT 的拓撲圖組件還有非常多的功能，無法在一篇博客中說透，我只能蜻蜓點水的提到大部分拓撲圖應用需要關注的功能點，HT 更多的 HTML5 拓撲圖功能留給大家去探索吧。

http://www.hightopo.com/guide...

總結

以上是生活随笔為你收集整理的数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。