Question

我正在使用https://jsfiddle.net/CJ_Shijo/e7osumLp/在D3.js树形布局版本3中工作例。在jsfiddle示例中，我可以在单击子节点时隐藏不相关的父节点。此外，我可以在单击叶节点时动态添加节点。以下两个功能用于动态地向叶节点添加节点。

function updateJson(node) {
     var associatedItems = getNewData(node);
     node._children = associatedItems;
     // if the node has visible children, make them invisible
    if (node.children) {
      node._children = node.children;
      node.all_children = node.children;
      node.children = null;
    }
   // if the node has invisible children, make them visible
   else {
      node.children = node._children;
      node.all_children = node._children;
      node._children = null;
  }
  // update the view to reflect the new changes
  if (node.children) {
      node.children.forEach(function (n) {
          n.hidden = false;
      });
      if (node.parent) {
        node.parent.children = [node, ];
        node.parent.hidden = true;
        node.parent.children.filter(function (n) {
            return n !== node;
          }).forEach(function (n) {
              n.hidden = true;
          });
      }
  }

}

 function getNewData(node) {
 /* Return a list of things that will be added as children to the json. */
  return [{
            name: "E",
       }, {
            name: "F",
       }, {
           name: "G",
      }
   ];
}

我使用d3 V3版本实现了这一功能。我需要使用d3 V4版本实现相同的功能。

我用这个jsfiddle https://jsfiddle.net/CJ_Shijo/km4txwna/示例启动了d3 v4版本。

我有像下面这样的平面json数据。

var flatData = [
  {"name": "Top Level", "parent": null}, 
  {"name": "Level 2: A", "parent": "Top Level" },
  {"name": "Level 2: B", "parent": "Top Level" },
  {"name": "Son Of A", "parent": "Level 2: A" },
  {"name": "Daughter Of A", "parent": "Level 2: A" }
];

通过使用以下d3方法，我创建了分层（树）数据。

var treeData = d3.stratify()
                 .id(function(d) { return d.name; })
                 .parentId(function(d) { return d.parent; })
                 (flatData);

  treeData.each(function(d) { d.name = d.id;  }); 
   var root = d3.hierarchy(treeData, function(d) { return d.children; });

在v4版本示例中，我面临着向叶节点动态添加节点的问题。儿童节点未正确附加。任何人都可以在V4版本中帮助我吗？

Answer 1

以下函数有助于在d3 v4中实现向叶节点添加节点。

 function addNodes(selectedNode) { 

    var data = [{"name":"First"},{"name":"Second"},{"name":"Third"}];

    if (!selectedNode.children) {
            var childArray = [];
         }

    selectedNode.height = selectedNode.height + 1;

    data.forEach(function (d) {
        var obj = d3.hierarchy(d);
        obj.data.parent = selected.name;
        obj.depth = selected.depth + 1;
        obj.parent = selected;
        obj.name = d.name;
        childArray.push(obj);
    });
selectedNode.children = childArray;

}

使用树布局v4（版本4）将节点动态添加到D3.js中的叶节点

1 个答案: