CODEWITHSUNDEEP
d3.js
Daniel Sh.
Daniel Sh.

Reputation: 2074

d3.js Tree Layout not expanded on creation

I've been digging d3.js for a few days by now and so far I love it.

I got into it while searching for a tree layout since I need one for my project. I came accross this example I've accomplished the data-fetching and the stylish aspects to fit my site.

My question, since I wasn't able to get away with it is: How can I tell the tree not to be expanded at the beggining? I want the user to go clicking on the nodes as desired, because I always find myself un-clicking at the very start just to get the "flare" node alone.

Thanks in advance, if you know how to do it you can just add the code or re-work the one in the sample, I'll then apply it to the project I'm working on.

Upvotes: 0

Views: 439

Answers (1)

Scott Cameron
Scott Cameron

Reputation: 5323

That example toggles children open or closed with this code:

// Toggle children on click.
function click(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update(d);
}

So you can initialize the tree to be closed at a particular level by changing the original dataset from children to _children on any level you wish to start out as collapsed.

For example (from flare.json):

{
 "name": "flare",
 "_children": [
  {
   "name": "analytics",
   "_children": [
    {
     "name": "cluster",
     "_children": [
      {"name": "AgglomerativeCluster", "size": 3938},
      {"name": "CommunityStructure", "size": 3812},
      {"name": "HierarchicalCluster", "size": 6714},
      {"name": "MergeEdge", "size": 743}
     ]
    }
...
...

Upvotes: 1

Related Questions