d3.js树形布局：展开时折叠其他节点？

Question

在使用d3.js（example）的树形布局中，我想折叠不在分支中的已被点击的节点。

例如，在上述的演示中，尝试以下方法：

1. 点击 “父1”（儿童1和子2被示出）
2. 点击 “儿童1”（儿童1.1是所示）
3. 点击“孩子2”（儿童2.1所示）

现在你应该看到两个“孩子1”和“2儿童”的孩子。

我想有以下发生：

1. 点击 “家长1”（儿童1儿童2所示）
2. 点击 “孩子1”（儿童1.1所示）
3. 点击“孩子2”（儿童2.1所示，儿童1.1隐藏）

所以比“活动”分支其他节点的孩子应该被隐藏。

我该如何做到最好？ （当然有效，因为我将使用相当大的数据集）

Answer 1

一个简单的解决方案是修改点击函数，使得如果节点有父节点，父节点的子节点都会折叠，但只有当子节点不是被点击的节点。

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); 
} 

更新jsbin：http://jsbin.com/etIJABU/2/edit

Answer 2

，如果你想，当你点击有子节点只崩溃的其他节点，在第二IF加上 “& & d.children” ..

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); 
     }