d3.js tree: How do I remove a node's siblings when I click on it?

Question

total d3 newbie here,

I have done a rough tree diagram using some very helpful and informative internet tutorials.

Right now, when a node is clicked on, the children of its siblings collapse.

 if (d !== root) {
    if (d.parent){
        d.parent.children.forEach(function(element) {
        if (d !== element) {
            collapse(element);
        }
    });
}

}

http://codepen.io/depaorca/pen/qEdLOr?editors=100

Instead I now want the siblings to be removed on each level when I click on a node, and reappear when I close the node.

I know I need to do this in function click(d), what I am stuck on is, can I alter my code to simply replace the collapsing code with some sort of remove function? Is there a simple solution I'm completely overlooking?

Answer 1

So if you look at the last bit of click(d) you'll find that it is checking if the node has a parent and collapsing all of the nodes that are not equal to the node clicked. If instead of collapsing them you move them from the parent's .children attribute into the parents ._children attribute, they should be hidden.

Then you just need to write a case where the parent has objects in ._children and move them back into .children