D3.js Collapsible Force Layout, collapsed by default

Question

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 blank and not working. I'm using the latest Mozilla Firefox 43.0.4. I even put it to plunker with the same result - blank.

Can someone identify the problem?

Also would it be possible to have it partially collpased? That means the first set of children expanded but everything else collapsed?

My non-working example on plunker

I believe it can be achieved by modifying the update function.

Changing "children" to "_children" in the json data sheet does not work properly.

function update(d) {

  var nodes = flatten(root),
      links = d3.layout.tree().links(nodes);

  // Restart the force layout.
  force
      .nodes(nodes)
      .links(links)
      .start();

i looked here: d3.js collapsible force layout with all the nodes collapsed and here: How can I start with all the nodes collapsed in d3js?

None of the solution is working for me.

Will be thankful for any advice.

UPDATED 28.1.2018

Works nicely thanks to the answer below.

Here is a working example: http://plnkr.co/edit/QtFXa53Q7p65NQpO4z5f?p=preview

Answer 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 :

function simulateClick(){


        $.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 = [];
function flatten(root) {
      var nodes = [], i = 0;

      function recurse(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