數百個 HTML5 例子學習 HT 圖形組件 – 拓撲圖篇

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

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

這樣綜合並可搜索的手冊入口竟然還常被問及 HT 的 Demo 在哪裏？只能怪這些年深刻人心的極致用戶體驗理念，把人慣得包括不少程序員都如此之「懶」，固然也怪咱們沒把用戶體驗的最後一千米作到位，因而最近 wangyinlong 同窗人工例子抓圖，將數百個手冊例子進行了歸類整理，最終造成了方便你們直觀查找全部 HT 例子的頁面：http://www.hightopo.com/demos/index.html

很明顯 http://www.hightopo.com/demos/index.html 相比 http://www.hightopo.com/guide/readme.html 頁面，對於 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/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/game/Subara/index.php

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

// 建立數據模型容器
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/guide/core/datamodel/ht-datamodel-guide.html 手冊

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

提到父子關係讓咱們來看看一個比較綜合性的小例子：http://www.hightopo.com/guide/guide/core/beginners/examples/example_overview.html

 

// 建立數據容器
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/guide/core/beginners/ht-beginners-guide.html#ref_graphviewinteraction

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/react/ 的 Flux 單向流設計理念：http://facebook.github.io/flux/docs/overview.html

HT 的 DataModel 至關於 Flux 中的 Store 模塊，拓撲圖、樹和表格這些天然對應 View 模塊，通常發起 Action 動做就是後臺數據變化，或者用戶手工輸入表格屬性值之類，但最終都不是直接修改 View，都是從 Data/DataModel/Store 發起修改，而後數據模型派發事件給全部 View，最後 View 根據不一樣事件作相應的處理。

有興趣的同窗能夠打開 http://www.hightopo.com/guide/guide/core/beginners/examples/example_overview.html 控制檯，輸入如圖的代碼體驗下實時修改數據模型的效果：

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

 

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

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

以上這個例子你能夠在這裏玩：http://www.hightopo.com/demo/2deditor_20151010/HT-2D-Editor.html 。

另外 HT 的矢量內置了 Chart 類型，矢量內置的 Chart 不一樣於傳統獨立的 Chart 組件，傳統的 Chart 是獨立的視圖 DOM 組件，但 HT 的拓撲是 Cavans 方式繪製，所以無法實現 Chart 組件和普通圖元的不一樣層次融合顯示，但矢量的 Chart 類型卻是完美的實現了這樣的融合，不少工控應用的客戶會將矢量 Chart 與拓撲圖元素融合一體，可參見《基於HT for Web的Web SCADA工控移動應用》http://www.hightopo.com/blog/402.html 一文中 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/guide/plugin/htmlnode/ht-htmlnode-guide.html ，這種結合有必定的侷限性，不到萬不得已不建議用戶使用該插件。

HT 提供了各類豐富的通用組件，以及複雜的拓撲圖編輯交互插件 http://www.hightopo.com/guide/guide/plugin/xeditinteractor/ht-xeditinteractor-guide.html，用戶分分鐘能夠快速開發出各類各樣的編輯器工具。入門手冊中也有個 http://www.hightopo.com/guide/guide/core/beginners/examples/example_editor.html 簡單的編輯器例子，教用戶如何自定義建立節點、連線和多邊形的示例教材，學習自定義拓撲圖交互可今後例子入手。

甚至能夠像 http://www.hightopo.com/guide/guide/core/beginners/examples/example_animation.html 這個例子那樣，關閉掉拓撲圖的全部默認交互，直接經過添加原生的 HTML DOM 的事件監聽進行自定義交互邏輯處理。

構建出拓撲圖後不少人關係的是如何實現動畫，動畫從本質上來講就是在必定的時間點上驅動圖元的參數變化，例如大小、顏色、粗細包括可見不可見等來實現各類動畫效果，而 HT 原本全部圖元都是數據驅動，用戶隨時能夠修改 Data 上的任何屬性，所以隨便起個定時器 windwo.setInterval 不斷改變圖元屬性值便可實現動畫效果，但爲了方便客戶 HT 還提供了諸多方便函數和插件。

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

若是是持續週期的變化可採用《HT for Web 調度手冊》http://www.hightopo.com/guide/guide/core/schedule/ht-schedule-guide.html 的調度插件：

若是你喜歡 https://github.com/tweenjs/tween.js 的 chaining 函數方式串聯多種動畫，可採用《HT for Web 動畫手冊》http://www.hightopo.com/guide/guide/plugin/animation/ht-animation-guide.html 的插件。對於連線流動、虛線流動等常見連線動畫需求 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/blog_baidu_20150928/ht-baidu.html

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

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

http://www.hightopo.com/guide/guide/core/serialization/examples/example_exportimport.html

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

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

雖然 HT 的拓撲圖組件能夠承載萬以上的拓撲圖元量，但若是這些拓撲圖元都經過手工佈局那是難以想象的工做量，所以 HT 爲拓撲圖組件提供的多種自動佈局引擎算法，例如彈力佈局、圓形佈局、星型佈局和層次佈局等多種樣式效果

《HT for Web 自動佈局手冊》http://www.hightopo.com/guide/guide/plugin/autolayout/ht-autolayout-guide.html

《HT for Web 彈力佈局手冊》http://www.hightopo.com/guide/guide/plugin/forcelayout/ht-forcelayout-guide.html

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

拓撲圖篇就寫這些吧，HT 的拓撲圖組件還有很是多的功能，沒法在一篇博客中說透，我只能走馬觀花的提到大部分拓撲圖應用須要關注的功能點，HT 更多的 HTML5 拓撲圖功能留給你們去探索吧。

http://www.hightopo.com/guide/guide/plugin/flow/examples/example_demo3.html

 

 

Everything you need to create cutting-edge 2D and 3D visualization