D3.js树全部展开和全部折叠 [英] D3.js Tree Expand All and Collapse All

问题描述

我使用D3.js构建树，我想要做的是添加两个按钮，全部展开和全部折叠到页面的顶部，像这样。

I'm building a Tree using D3.js and what I am trying to do is add two buttons, Expand All and Collapse All to the top of the page like this.

当我单击全部展开时，所有节点都应展开。当我点击全部折叠时，所有的节点都应该折叠到根元素。

When I click "Expand All", all the nodes should expand. And when I click "Collapse All", all the nodes should collapse to the root element.

这是我当前的代码 http://bl.ocks.org/anonymous/ab8d7f85cca6f745a107

但问题是，它不工作。

But the problem is, it isn't working. Can somebody suggest how to make it work?

推荐答案

试试这个程式码。这是工作的 JsFiddle 。

Try this code. Here is the working JsFiddle.

function expand(d){   
    var children = (d.children)?d.children:d._children;
    if (d._children) {        
        d.children = d._children;
        d._children = null;       
    }
    if(children)
      children.forEach(expand);
}

function expandAll(){
    expand(root); 
    update(root);
}

function collapseAll(){
    root.children.forEach(collapse);
    collapse(root);
    update(root);
}

这篇关于D3.js树全部展开和全部折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！