有这样的：
http://mbostock.github.com/d3/talk/20111018/tree.html
我的SVG Open keynote中还有许多其他交互式分层布局示例。

有几种方法，一种是使用常规stying来隐藏子元素的标记（opacity：0，或显示：然而，这只是使数据不可见，树保持其形状，就好像数据在那里一样，你只是看不到它。
通常，你会希望树假装数据不存在并相应地更新，为此，你可以使用与上面链接中的强制定向布局示例相同的方法。
它可以归结为：1）使用函数来构建d3树2）将点击事件附加到可折叠节点3）点击事件重命名节点的children属性并调用1）中的函数，该函数重绘树而不重绘该节点的子节点。
下面是nkoren的答案（http://bl.ocks.org/1062288）中链接的相关代码：

function update() { 
    // build the tree layout here
    //  append on("click", click) to the collapsible nodes
}

// Toggle children on click
function click(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update();
}

不幸的是，我仍然在与D3的速度，不知道如何最好地回答您的问题。但是这里有一个强制定向布局，它允许你通过点击来显示/隐藏节点，这可能会给予你一些启发：http://bl.ocks.org/1062288

创建一个折叠函数，仅当节点有子节点时，单击该函数时才会执行。我分享了下面的代码，它对我很有用：

collapse = (d) => {
    if (d.children) {
      d._children = d.children;
      d._children.forEach((d) => this.collapse(d));
      d.children = null;
    }
  }

  click = (d) => {
    console.log('click: ', d);
    if (d.children) {
      this.collapse(d);
      d.children = null;
    } else {
      d.children = d._children;
      d._children = null;
    }
    this.updateChart(d);
  }