Javascript D3分区-单击时显示下一级

我有一个D3分区，它显示了整个分区的所有级别

我只想在图表加载时显示第一个级别，然后单击显示后续级别

例如，在该树中，单击节点时会显示下一个级别：

下面是我的分区的代码：

我想做一些类似于点击切换的操作：

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

---

在孩子们被设置和取消设置的地方，然后重新绘制类似于树布局的东西会有点困难。在

显示的帮助下做这件事是一次轻松的散步

首次绘制路径时，使用
显示：无
使深度大于1的所有节点消失：

svg.selectAll("path")
  .data(partition.nodes(root))
  .enter().append("path")
  .attr("d", arc)
  .style("fill", function(d) {
    return color((d.children ? d : d.parent).name);
  })
  .style("display", function(d) {
    if (d.depth > 1) {
      return "none";//nodes whose depth is more than 1 make its vanish
    } else {
      return "";
    }
  })

现在，在节点上单击“使所有节点重新显示”，但单击根节点时除外

  .style("display", function(d1) {
    if (d.depth == 0 && d1.depth > 1) {
      return "none"//root node clicked so show only 2 depths.
    } else {
      return "";
    }
  })

工作代码
您可以通过编程调用切换函数，或者在将数据传递到布局之前过滤数据（请参阅）。谢谢。我希望能找到一个解决方案，尽管这是可行的。
  .style("display", function(d1) {
    if (d.depth == 0 && d1.depth > 1) {
      return "none"//root node clicked so show only 2 depths.
    } else {
      return "";
    }
  })