基於HTML5的3D網路拓撲樹呈現
阿新 • • 發佈:2019-02-13
/** * 建立連線 * @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); } }