Ajouter dynamiquement des nœuds à un nœud feuille dans D3.js en utilisant la disposition arborescente v4 (version 4)

Question

Je travaille dans D3.js Tree Layout Version 3 avec https://jsfiddle.net/CJ_Shijo/e7osumLp/ exemple. Dans l'exemple jsfiddle, je peux masquer des nœuds parents non apparentés en cliquant sur le nœud enfant. Aussi, je peux ajouter des nœuds dynamiquement tout en cliquant sur les nœuds feuilles. Ci-dessous deux fonctions permettent d'ajouter dynamiquement des nœuds aux nœuds feuille.

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

J'ai atteint ces caractéristiques en utilisant la version d3 V3. Je dois réaliser les mêmes caractéristiques avec la version d3 V4.

J'ai commencé la version d3 v4 avec ce jsfiddle https://jsfiddle.net/CJ_Shijo/km4txwna/ Exemple.

J'ai des données JSON plates comme ci-dessous. En utilisant les méthodes d3 ci-dessous, j'ai créé des données hiérarchiques (arborescentes).

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

Dans le problème exemple, je suis face à la version v4 sur l'ajout de nœuds dynamiquement à feuilles noeuds de nodes.Child ne sont pas attacher correctement. Quelqu'un peut-il m'aider sur la même chose dans la version V4?

Answer 1

fonction suivante qui est utile pour ajouter des nœuds aux nœuds feuilles dans 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; 

}