什麼是網絡拓撲
網絡拓撲，指構成網絡的成員間特定的排列方式。分為實體的，即真實的、或者邏輯的，即虛拟的兩種。如果兩個網絡的連接配接結構相同，我們就説它們的網絡拓撲相同，盡管它們各自内部的實體接線、節點間距離可能會有不同。 - 維基百科
網絡拓撲圖的繪制
很多人用visio繪制網絡拓撲圖，非常精美，但隻能靜态示意，也有些傳統的拓撲圖中間件，基于Java、flex或者Silverlight技術，能夠動态顯示，隻是界面略顯沉重，于是有人嘗試純Web技術的圖形元件，其中有不少佼佼者如：mxgraph, yfiles...... 都是老外開發的産品，類庫巨大，售價昂貴，技術支援是個問題，那麼有沒有一種輕巧、幹淨、國産的純Web拓撲圖元件呢？于是就有了Qunee - 開發清新、高效的圖形元件
Qunee是一套基于HTML5的網絡圖元件，提供Web圖形解決方案，借助Qunee，可以輕松完成 地圖，拓撲圖，組織圖等等，官方網站：qunee.com, 線上示範：demo.qunee.com
拓撲圖典型示例
以“公共事業服務中心網絡拓撲圖”為例，展示典型的拓撲圖結構，包含了節點、連線、分組等典型元素，通過圖形展示，中心網與各個分支結構之間的關系變得一目了然
拓撲圖中元素類型
拓撲圖中基本的圖元要素有：節點，文字，連線，分組等，在這個示例中都得到了展現
建立節點
function createNode(image, x, y, name, group){
var node = graph.createNode(name, x, y);
if(image){
if(Q.isString(image)){
image = "./network/images2/" + image;
}
node.image = image;
}
if(group){
group.addChild(node);
}
return node;
}
建立文字元素
function createText(name, x, y, fontSize, color, parent){
var text = graph.createText(name, x, y);
text.setStyle(Q.Styles.LABEL_ANCHOR_POSITION, Q.Position.CENTER_MIDDLE);
text.setStyle(Q.Styles.LABEL_POSITION, Q.Position.CENTER_MIDDLE);
text.setStyle(Q.Styles.LABEL_FONT_SIZE, fontSize);
text.setStyle(Q.Styles.LABEL_COLOR, color);
if(parent){
parent.addChild(text);
}
return text;
}
建立連線元素
function createEdge(a, b, color, dashed, name){
var edge = graph.createEdge(name, a, b);
if(dashed){
edge.setStyle(Q.Styles.EDGE_LINE_DASH, [8, 5]);
}
edge.setStyle(Q.Styles.EDGE_WIDTH, 3);
edge.setStyle(Q.Styles.EDGE_COLOR, color);
edge.setStyle(Q.Styles.ARROW_TO, false);
return edge;
}
建立雲狀分組
function createGroup(padding){
var group = graph.createGroup();
group.groupImage = graphs.group_cloud;
group.padding = padding || 30;
return group;
}
建立虛線樣式
edge.setStyle(Q.Styles.EDGE_LINE_DASH, [8, 5]);
建立Z形連線類型
edge.edgeType = Q.Consts.EDGE_TYPE_ZIGZAG;
建立彎向某個節點的曲線
function FlexEdgeUI(edge, graph){
Q.doSuperConstructor(this, FlexEdgeUI, arguments);
}
FlexEdgeUI.prototype = {
drawEdge: function(path, fromUI, toUI, edgeType, fromBounds, toBounds){
var from = fromBounds.center;
path.curveTo(from.x, from.y, internet.x, internet.y);
}
}
Q.extend(FlexEdgeUI, Q.EdgeUI);
//關聯使用
edge.uiClass = FlexEdgeUI;
線上視訊