json的D3樹佈局

Question

我正在研究d3項目以允許動態樹創建。

這會正確創建樹，但是如果我將樹保存爲json並重新加載它，然後添加一些節點，它會完全混淆樹結構。

的JSON結構看起來不錯，我帶出的屬性是D3增加了數據：

var json = JSON.stringify(treeData,function(key, value) { 
        if(key == 'parent') { return value.name;} 
        else if(key == 'depth') { return undefined;} 
        else if(key == 'x') { return undefined;} 
        else if(key == 'y') { return undefined;} 
        else {return value;} 
        }); 

它看起來像D3正在退出節點從深度0

請在這裏看到小提琴開始：http://jsfiddle.net/z15825qu/

Answer 1

的問題就在這裏：

var node = select.data(nodes, function(d) 
         { 
          if(d.Type!=="e"){ 
           d.ExpVal=function(){return CalcEV(d);}(); 
          } 
          return d.id || (d.id = ++self.i);//this is the problem 
         }); 

充分利用ID生成隨機

var node = select.data(nodes, function(d) 
         { 
          if(d.Type!=="e"){ 
           d.ExpVal=function(){return CalcEV(d);}(); 
          } 
          return d.id || (d.id = parseInt(Math.random()*100)); //make the id generation random 
         }); 

原因：

當您繪製它第一次的localStorage沒有存儲數據，所以ID生成是獨一無二的，當你做++ self.i。

現在當localstorage有值並從那裏渲染時。 節點被添加，++ self.i。將生成已存在節點的ID（因爲它將從0開始）。因此，由於您有多個具有相同ID的節點，因此一切都會出錯。

工作代碼here

希望這有助於！