动态添加节点到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树布局请求（开关）

回答

相关问题