d3.js树图 - 在单击根节点时只展开下一级节点 [英] d3.js tree diagram - expand only next level nodes when clicking on root node

问题描述

我有一个树图我试图适应这里，但问题是，它会自动扩展树中的所有根节点，当我单击一个折叠的节点，而不是只是扩展直接的孩子。这是一个小提琴。如何解决此问题？

I have a tree diagram I'm trying to adapt here, but the problem is that it automatically expands all root nodes in the tree when I click on a collapsed node, rather than just expanding the immediate children. Here's a fiddle. How do I resolve this?

http：// jsfiddle .net / heaversm / nw577 /

处理节点切换/折叠的函数：

The function for handling the toggling / collapsing of the nodes:

function toggleChildren(d) {
    if (d.children) {
        d._children = d.children;
        d.children = null;
    } else if (d._children) {
        d.children = d._children;
        d._children = null;
    }
    return d;
}

推荐答案

问题是，开始扩展，并且只有单个节点的状态在点击时切换。也就是说，根下的所有节点仍然被展开，但未示出。只要单击根节点，它们就是。

The problem is that all nodes start expanded and only the state of an individual node is toggled on click. That is, all nodes underneath the root are still expanded, but not shown. As soon as you click the root node, they are. So they are not expanded as well as the root, but they were never collapsed.

要修复，只需折叠所有节点即可开始：

To fix, just collapse all nodes to start with:

tree.nodes(root).forEach(function(n) { toggle(n); });

完成演示此处。

这篇关于d3.js树图 - 在单击根节点时只展开下一级节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！