title: d3.js tree layout: collapsing other nodes when expanding one?
body: <p>On a tree layout using d3.js (<a href="http://jsbin.com/okUxAvE/1/edit?js,output" rel="nofollow">example</a>), I'd like to collapse nodes that are not in the branch that has been clicked on.</p>
  
  <p>For example, in the above demo, try the following:</p>
  
  <ol>
  <li>click on "Parent 1" (Child 1 and Child 2 are shown)</li>
  <li>click on "Child 1" (Child 1.1 is shown)</li>
  <li>click on "Child 2" (Child 2.1 is shown)</li>
  </ol>
  
  <p>Now you should see both the children of "Child 1" and "Child 2".</p>
  
  <p>I would like to have the following happen:</p>
  
  <ol>
  <li>click on "Parent 1" (Child 1 and Child 2 are shown)</li>
  <li>click on "Child 1" (Child 1.1 is shown)</li>
  <li>click on "Child 2" (Child 2.1 is shown, <strong>Child 1.1 is hidden</strong>)</li>
  </ol>
  
  <p>So children of nodes other than on the "active" branch should be hidden.</p>
  
  <p>How can I best approach this? (efficiently of course, as I'll be using a fairly large dataset)</p>