基於HTML5的網絡拓撲圖(1)

什麼是網絡拓撲

網絡拓撲，指構成網絡的成員間特定的排列方式。分爲物理的，即真實的、或者邏輯的，即虛擬的兩種。若是兩個網絡的鏈接結構相同，咱們就説它們的網絡拓撲相同，儘管它們各自內部的物理接線、節點間距離可能會有不一樣。 - 維基百科

網絡拓撲圖的繪製

不少人用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;

 

在線視頻