1. 程式人生 > >基於HTML5的3D網路拓撲樹呈現

基於HTML5的3D網路拓撲樹呈現

/**
 * 建立連線
 * @param {ht.DataModel} dataModel - 資料容器
 * @param {ht.Node} source - 起點
 * @param {ht.Node} target - 終點
 */
function createEdge(dataModel, source, target) {
    // 建立連線,連結父親節點及孩子節點
    var edge = new ht.Edge();
    edge.setSource(source);
    edge.setTarget(target);
    dataModel.add(edge);
}

/**
 * 建立節點物件
 * @param {ht.DataModel} dataModel - 資料容器
 * @param {ht.Node} [parent] - 父親節點
 * @returns {ht.Node} 節點物件
 */
function createNode(dataModel, parent) {
    var node = new ht.Node();
    if (parent) {
        // 設定父親節點
        node.setParent(parent);

        createEdge(dataModel, parent, node);
    }
    // 新增到資料容器中
    dataModel.add(node);
    return node;
}

/**
 * 建立結構樹
 * @param {ht.DataModel} dataModel - 資料容器
 * @param {ht.Node} parent - 父親節點
 * @param {Number} level - 深度
 * @param {Array} count - 每層節點個數
 * @param {function(ht.Node, Number, Number)} callback - 回撥函式(節點物件,節點對應的層級,節點在層級中的編號)
 */
function createTreeNodes(dataModel, parent, level, count, callback) {
    level--;
    var num = (typeof count === 'number' ? count : count[level]);

    while (num--) {
        var node = createNode(dataModel, parent);
        // 呼叫回撥函式,使用者可以在回撥裡面設定節點相關屬性
        callback(node, level, num);
        if (level === 0) continue;
        // 遞迴呼叫建立孩子節點
        createTreeNodes(dataModel, node, level, count, callback);
    }
}