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

Question

在使用 d3.js （示例）的树布局上，我想折叠不在已单击分支中的节点。

例如，在上面的演示中，尝试以下操作：

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

一种简单的解决方案是修改 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

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