d3.js树布局:展开其他节点时会折叠吗？

Question

在使用d3.js(示例)的树布局上,我想要折叠不在已单击的分支中的节点.

例如,在上面的演示中,请尝试以下操作:

1. 点击"父母1"(显示儿童1和儿童2)
2. 点击"儿童1"(显示儿童1.1)
3. 点击"Child 2"(显示Child 2.1)

现在你应该看到"孩子1"和"孩子2"的孩子.

我希望发生以下情况:

1. 点击"父母1"(显示儿童1和儿童2)
2. 点击"儿童1"(显示儿童1.1)
3. 点击"Child 2"(显示Child 2.1,隐藏Child 1.1)

因此,应该隐藏除"活动"分支之外的节点的子节点.

我怎样才能最好地接近这个？(当然有效,因为我将使用相当大的数据集)

Answer 1

一个简单的解决方案是修改click函数,这样如果节点有父节点,则父节点的子节点都会折叠,但前提是子节点不是被单击的节点.

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