CODEWITHSUNDEEP
javascriptsvgd3.js
stephenhay
stephenhay

Reputation: 2874

d3.js tree layout: collapsing other nodes when expanding one?

On a tree layout using d3.js (example), I'd like to collapse nodes that are not in the branch that has been clicked on.

For example, in the above demo, try the following:

  1. click on "Parent 1" (Child 1 and Child 2 are shown)
  2. click on "Child 1" (Child 1.1 is shown)
  3. click on "Child 2" (Child 2.1 is shown)

Now you should see both the children of "Child 1" and "Child 2".

I would like to have the following happen:

  1. click on "Parent 1" (Child 1 and Child 2 are shown)
  2. click on "Child 1" (Child 1.1 is shown)
  3. click on "Child 2" (Child 2.1 is shown, Child 1.1 is hidden)

So children of nodes other than on the "active" branch should be hidden.

How can I best approach this? (efficiently of course, as I'll be using a fairly large dataset)

Upvotes: 4

Views: 6076

Answers (2)

ramon prata
ramon prata

Reputation: 31

if you want to collapse other nodes only when you click on nodes with children, add "&& d.children" in the second IF..

function click(d) {
        if (d.children) {
          d._children = d.children;
          d.children = null;
        } 
        else {
          d.children = d._children;
          d._children = null;
        }
        if (d.parent && d.children) { //add here, 
          d.parent.children.forEach(function(element) {
        if (d !== element) {
        collapse(element);
        }});
      }
        update(d);
      }

Upvotes: 1

t.888
t.888

Reputation: 3902

One simple solution is to modify the click function such that if the node has a parent, the parent's children are each collapsed, but only if the child isn't the node that was clicked on.

function click(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  // If the node has a parent, then collapse its child nodes
  // except for this clicked node.
  if (d.parent) {
    d.parent.children.forEach(function(element) {
      if (d !== element) {
        collapse(element);
      }
    });
  }
  update(d);
}

Updated jsbin: http://jsbin.com/etIJABU/2/edit

Upvotes: 8

Related Questions