D3可折叠树-一次折叠一个级别

时间:2018-09-26 20:16:28

标签: javascript algorithm typescript d3.js tree

我有d3可折叠树。我有外部按钮来控制树的展开和折叠。我可以展开全部,可以折叠全部。而且,我可以一次扩展一个级别。我一次无法崩溃一个级别。

对于任何不了解d3的人。 如果节点被展开,则d.children不为空&d。 children为空,并且如果节点为d 。children不为空且d.children为空。 / p>

这是我扩展一个级别的逻辑:

private expandNodeOneLevel(d) {
    var children = (d.children) ? d.children : d._children;
    if (!d.children) {
       if (children) {
           d.children = d._children;
           d._children = null;
       }
       return;
     }
    if (children) {
       children.forEach((node) => this.expandNodeOneLevel(node));
     }
}



 public expandOneLevelNodes() {
    this.expandNodeOneLevel(this.root);
    this.update(this.root);
  }

这是我一次折叠一个级别的逻辑,这是错误的,因为它正在折叠所有树节点。我无法中断递归。

private collpaseOneLevelNodes = (d) => {
    var children = (d.children) ? d.children : d._children;
    if (!children) {
      return;
    }
    children.forEach((node) => {
      this.collpaseOneLevelNodes(node);
    });
    if (d.children) {
        d._children = d.children;
        d.children = null;
    }
    return;
  }



 public collapseOneLevel() {
    this.collpaseOneLevelNodes(this.root);
    this.update(this.root);
  }

如果有人指出我的错误所在或其他更好的方法,我将不胜感激。

1 个答案:

答案 0 :(得分:0)

想通了。没注意到d3提供了父项信息。

 private collpaseOneLevelNodes = (d) => {
var children = (d.children) ? d.children : d._children;
if (!children || !d.children) {
  if (!d.parent._children) {
    d.parent._children = d.parent.children;
    d.parent.children = null;
  }
  return;
}
if (d.children) {
  children.forEach((node) => {
    this.collpaseOneLevelNodes(node);
  });
}

}

 public collapseOneLevel() {
    this.collpaseOneLevelNodes(this.root);
    this.update(this.root);
  }