Hide unrelated parent nodes but child node in D3.js

Question

I'm trying to do this thing in D3.js but unable to find a way to do it.

What I want to do is, when a person clicks on the root node (level 0), it should show the child elements (level 1). When a person clicks on one of the child nodes (level 1) it should show its childrens (level 2) and the parent and parent-of-parent (level 1, this what the user clicked), but hide all the unrelated parents (from level 1).

Let me explain you this with pictures.

Answer 1

You could do something like http://bl.ocks.org/benlyall/4fea200ebebb273aa4df

I forked http://bl.ocks.org/mbostock/4339083 and made a few changes:

1. Added a new property to each node .all_children which keeps track of all children. We need this, or something similar since .children contains the child nodes currently displayed, and ._children is used by the existing code to determine if a node contains children or not (and sets the style accordingly).

   Also added a .hidden property that helps to determine whether or not the node should be displayed.

   These are added after loading the 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 the update function to reflect the new changes and only draw the nodes that are supposed to be drawn:

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

   The nodes variable is set to only contain nodes that are NOT hidden.

3. Updated the click handler to correctly set the state of the nodes in the 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 the if statement is called when we're collapsing a node, in which case, we need to display all of the siblings of the clicked node by setting d.parent.children to d.parent.all_children and setting each of those nodes to .hidden = false . And we need to hide all the children of the clicked node by setting d.children = null and then setting each node in d._children to hidden.

   The second part of the if statement is called when we're expanding a node, in which case, we need to hide its siblings (set .hidden to true ) and update the .children property of the clicked node's .parent node so that only the clicked node is listed as a child.