javascript - Hide unrelated parent nodes but child node in D3.js -

i'm trying thing in d3.js unable find way it.

what want is, when person clicks on root node (level 0), should show child elements (level 1). when person clicks on 1 of child nodes (level 1) should show childrens (level 2) , parent , parent-of-parent (level 1, user clicked), hide unrelated parents (from level 1).

let me explain pictures.

you http://bl.ocks.org/benlyall/4fea200ebebb273aa4df

i forked http://bl.ocks.org/mbostock/4339083 , made few changes:

1. added new property each node .all_children keeps track of children. need this, or similar since .children contains child nodes displayed, , ._children used existing code determine if node contains children or not (and sets style accordingly).

   also added .hidden property helps determine whether or not node should displayed.

   these added after loading data:

   d3.json("flare.json", function(error, flare) {     root = flare;     root.x0 = height / 2;     root.y0 = 0;      function collapse(d) {         if (d.children) {             d.all_children = d.children;             d._children = d.children;             d._children.foreach(collapse);             d.children = null;             d.hidden = true;         }     }      root.all_children = root.children;     root.children.foreach(collapse);     root.children.foreach(function(d) { d.hidden = false; });     root.hidden = false;     update(root); }); 

2. updated update function reflect new changes , draw nodes supposed drawn:

   function update(source) {      // compute new tree layout.     var nodes = tree.nodes(root).filter(function(d) { return !d.hidden; }).reverse(),     links = tree.links(nodes); 

   the nodes variable set contain nodes not hidden.

3. updated click handler correctly set state of nodes in display:

   // toggle children on click. function click(d) {     if (d.children) {         d._children = d.children;         d.children = null;         if (d._children) {             d._children.foreach(function(n) { n.hidden = true; });              if (d.parent) {                 d.parent.children = d.parent.all_children;                 d.parent.children.foreach(function(n) {                     n.hidden = false;                 });             }         }     } else {         d.children = d._children;         d._children = null;         if (d.children) {             d.children.foreach(function(n) { n.hidden = false; });              if (d.parent) {                 d.parent.children = [d,];                 d.parent.children.filter(function(n) { return n !== d; }).foreach(function(n) {                     n.hidden = true;                 });             }         }     }     update(d); } 

   the first part of if statement called when we're collapsing node, in case, need display of siblings of clicked node setting d.parent.children d.parent.all_children , setting each of nodes .hidden = false. , need hide children of clicked node setting d.children = null , setting each node in d._children hidden.

   the second part of if statement called when we're expanding node, in case, need hide siblings (set .hidden true) , update .children property of clicked node's .parent node clicked node listed child.