动态地将节点添加到D3树布局请求（切换时）

Momos Morbias 发表于 Dev

莫莫斯·莫比亚斯（Momos Morbias）

简介：我正在尝试扩展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（单击以进行切换时调用addNewNode，我仅为没有chilren的节点添加新节点）：

 var nodeEnter = node.enter().append("svg:g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
      .on("click", function(d) {

            // change start
            var newItem;

            if (!d._children || d._children.length === 0) {
                newItem = [
                    {
                        "name": "i am new",
                        "children": [
                            { "name": "i am new child 1"},
                            { "name": "i am new child 2"}
                        ]
                    }
                ];
                addNewNode(d, newItem);
            }
            // change end

            toggle(d); update(d);
        });

2个问题：

添加带有子节点的节点时，将其显示并扩展所有内容，应最小化子节点。
如果我试图将代码包装在setTimeout中，则会添加子项。但是，过渡和动画无法正常工作，d3还会扩展嵌套的子对象，您可以在此处看到它：

https://jsfiddle.net/xfj875vc/3/（尝试单击一次以上）

谢谢

西里尔·谢里安（Cyril Cherian）

首先你的方法

   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);
  }
});

这里的工作代码

如果您希望折叠加载的节点。

您可以这样创建一个新节点：

      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"
        }]
      }];

这里的工作代码

希望这可以帮助！

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。