動態添加節點到D3樹佈局請求（開關）

我想在切換事件中通過ajax/setTimeout添加新節點。

我做了什麼： 我有同步添加新節點的成功： https://jsfiddle.net/xfj875vc/1/

我改變只有2份代碼：

更改1（添加方法，添加新兒童的而不兒童的一個節點）： function addNewNode(d, item) { d._children = d._children || []; d._children = d._children.concat(item); }

變化2（來電addNewNo德點擊來回切換的時候，我加入了新的節點只爲節點無孩子）：

2個問題：

，這表明它和擴大一切，孩子應該儘量減少。
如果我想在setTimeout中包裝代碼，它會添加子項。然而，過渡和動畫不能正常工作，也D3展開嵌套的孩子的，你可以在這裏看到：

https://jsfiddle.net/xfj875vc/3/（嘗試點擊更多的是一次）

感謝

來源

2015-12-31 Momos Morbias

首先你方法

function addNewNode(d, item) { 
     d._children = d._children || []; 
     d._children = d._children.concat(item); 
    }

我們必須在這裏d._children has values when collapsed理解和so d.children will be undefined。反之亦然，當一個節點展開時。因此我不確定你在上面的代碼中想要做什麼。
其次這將把一個d._children.concat（item）;數組內的數組。這是不期望的，因此我正在做一個for循環下面。

應該是：

function addNewNode(d, item) { 
     item.forEach(function(i){ 
     if(d._children) 
      d._children.push(i)//will add child to the closed node  
     else 
      d.children.push(i)//will add child to expanded node. 
     }) 
}

接下來我保持一個標誌數據，以表明它並不需要通過上單擊ajax加載。

{ 
"name": "flare", 
"loaded" : true, //so this node flare will not be loaded on click via ajax 
"children": [ 
    { 
    "name": "analytics", 
    "loaded" : true,//so this node analytics will not be loaded on click via ajax 
    "children": [...

最後在我的點擊函數中，只有當這個標誌是未定義的時候纔會加載。

.on("click", function(d) { 

    if (d.loaded === undefined) {\\do ajax 
    setTimeout(function() { 
     var newItem; 

     newItem = [{ 
     "name": "i am new", 
     "children": [{ 
      "name": "i am new child 1" 
     }, { 
      "name": "i am new child 2" 
     }] 
     }]; 
     addNewNode(d, newItem); 
     d.loaded = true;//mark it as loaded so it doesn't load next time 
     console.log("called", d) 

     toggle(d); 
     update(d); 

    }, 1000) 
    } else {//already loaded so dont do ajax 
     toggle(d); 
     update(d); 
    } 
});

工作代碼here

如果你想要加載的節點都要塌了。

您創建一個新的節點是這樣的：

 newItem = [{ 
     "name": "i am new", 
     "children": [{ 
      "name": "i am new child 1" 
     }, { 
      "name": "i am new child 2" 
     }] 
     }];

取而代之的是做

 newItem = [{ 
     "name": "i am new", 
     "_children": [{ //note its changed to _children to show collapsed 
      "name": "i am new child 1" 
     }, { 
      "name": "i am new child 2" 
     }] 
     }];

工作代碼here

希望這有助於！

來源

2015-12-31 09:58:07 Cyril

動態添加節點到D3樹佈局請求（開關）

回答

相關問題