Question

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

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

点击“父母1”（显示儿童1和儿童2）
点击“儿童1”（显示儿童1.1）
点击“儿童2”（显示儿童2.1）

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

我希望发生以下情况：

点击“父母1”（显示儿童1和儿童2）
点击“儿童1”（显示儿童1.1）
点击“儿童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

如果您只想在点击包含子项的节点时折叠其他节点，请添加＆＃34;＆amp;＆amp; d.children＆＃34;在第二个IF ..

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

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

2 个答案: