動態樹生成使用javascript

我有一個樹結構如下所示：動態樹生成使用javascript

{ 
    "7": ["3", "8"], 
    "3": ["2", "4", "1"], 
    "4": ["5", "6"], 
    "8": ["12", "13"] 
}

這個字典簡單地意味着該樹的根節點是7（因爲它不是任何其他節點的子節點），其有兩個孩子3和8，而3有三個孩子（2,4,1），8個孩子有兩個孩子（12,13）。 3有一個孩子4，有兩個孩子（5,6）。

我的問題是我需要一個動態樹生成器，因爲我每次運行代碼時都會有不同的樹（並且它們不會是二叉樹！）結構。我的代碼是在python中，我想在web中顯示樹。

有沒有什麼javascript我可以用來繪製這棵樹的庫？

來源

2017-03-03 Rafiul Sabbir

要求庫是OT。 –

有任何數量的;我剛開始看。雖然如果你想繪製這樣的病態樹，那裏不存在節點，你可能會遇到麻煩。 –

@DaveNewton，樹應該是一個有效的樹，我可以保證。 :) –

您可以迭代對象的鍵並使用所有關係構建一個新的臨時對象。然後從根數組中刪除所有的密鑰與前任。

返回一個帶有根鍵和所有兒童的新對象。

var data = { 7: ["3", "8"], 3: ["2", "4", "1"], 4: ["5", "6"], 8: ["12", "13"] }, 
 
    tree = function (object) { 
 
     var root = Object.keys(data), 
 
      o = Object.create(null), 
 
      r = Object.create(null); 
 

 
     root.slice().forEach(function (k) { 
 
      o[k] = o[k] || {}; 
 
      data[k].forEach(function (a) { 
 
       var p = root.indexOf(a); 
 
       if (p !== -1) { 
 
        root.splice(p, 1); 
 
       } 
 
       o[a] = o[a] || {}; 
 
       o[k][a] = o[a]; 
 
      }); 
 
     }); 
 
     r[root] = o[root]; 
 
     return r; 
 
    }(data); 
 

 
console.log(tree);

.as-console-wrapper { max-height: 100% !important; top: 0; }

來源

2017-03-03 12:34:13

動態樹生成使用javascript

回答

相關問題