D3.js Collapsible Force Layout, Collapsed By Default

I would like to use a collapsible force diagram which is collapsed by default (starting out with only one node). I ran across this: http://bl.ocks.org/david4096/6168323 but it is b

Solution 1:

Basically, I added ID's to the circles on the nodes based on names :

.append("circle").attr('id', function(d){ return d.name})

Then I populated an array of all the parents childrens names, i.e the nodes you want to collapse :

if(parentschildren.length<1){ //so it doesn't populate it more than once
          node.filter(function(d){
            //console.log(d.name)return d.name === 'PARENT'//return just the parent node
          }).each(function(d){
            for(i=0;i<d.children.length;i++){
              parentschildren.push(d.children[i].name);
            }

          });
          }

Then I used the populated array to loop through to select the nodes I want to click and call a click function which simulates a click on selected nodes :

functionsimulateClick(){


        $.fn.d3Click = function (i) { //simulate click//if(i===0){this.each(function (i, e) {

    var evt = document.createEvent("MouseEvents");
    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
console.log(e);

    e.dispatchEvent(evt);
   // nodeEnter.on("click", click)
    evt.stopPropagation()


  }); //}
};

for(i=0;i<parentschildren.length;i++){ //loop through created array

$('#'+parentschildren[i]).d3Click(); //select element to click
}
    }

As for the unique id's i would do something like this :

node.each(function(d,i){ // use i to iterate through
d.uniqueID = 'uniqueNode' + i;
}

That piece of code will give each one a unique value. So the first one will be uniqueNode1 then uniqueNode2 and so on. Then to apply this to your nodes :

nodes.attr('id'(function(d){
return d.uniqueID;
})

As for your other question (which i think you should add to this question rather than in the comments so people know why my answer is so big) here is the answer to that.

To get all of the nodes started collapsed i made use of the recursive function you already have to populate an array to give you ever node that has children :

var nodes2 = [];
functionflatten(root) {
      var nodes = [], i = 0;

      functionrecurse(node) {
        if (node.children) {
          nodes2.push(node.name) //push the name of the node to the array
          node.children.forEach(recurse);
        }
        if (!node.id) node.id = ++i;
        nodes.push(node);
    }

      recurse(root);
      console.log(nodes2)
      return nodes;
    }

Now, as i said before, i had given them id's based on name, so to select them all i have to do is go through this new node array (nodes2) and click on the node that has the same ID as each element in that array. But you can't do this straight away as this array starts from the highest point (PARENT) and goes down, so I had to reverse the array :

var newNodes = [];
  for(i=nodes2.length; i>=0; i--){
    newNodes.push(nodes2[i])
  }

Now use this array to itterate through to select the nodes that have the same ID:

for(i=0;i<newNodes.length;i++){
 if(newNodes[i]){ //check if i isnt undefined etc
   $('#'+newNodes[i]).d3Click();
 }

}

And then click the parent twice again (to close then open) as you wanted that selected:

$('#PARENT').d3Click();

$('#PARENT').d3Click();

Hope that solves all your problems and here is the final updated plnkr : http://plnkr.co/edit/QtFXa53Q7p65NQpO4z5f?p=preview