Question

单击父级时，我试图打开父级下的所有子级

在单击第三个父级后，它应该一次打开所有左侧和右侧子级；如果在单击父级时所有子级都处于打开状态，则应该全部关闭。为了左右移动，我在嵌套JSON中将所有子级放在另一个下，因此我能够左右移动下面是代码，我在d3js垂直树中使用

if (d.children) {
                    _callerNode = null;
                    _callerMode = 0; // Collapse
                    d._children = d.children;
                    d.children = null;
                } else {
                    _callerNode = null;
                    _callerMode = 1; // Expand
                    if (d.parent.children && d.IC==="Yes") {
                      expand(d)
                    }
                    else{
                      d.children = d._children;
                      d._children = null;
                    }
                }
                update(d);
            });
        } else {
            if (d.children) {
                _callerNode = d;
                _callerMode = 0; // Collapse
                d._children = d.children;
                d.children = null;
            } else {
                _callerNode = null;
                _callerMode = 1; // Expand
                if (d.parent.children && d.IC==="Yes") {
                  expand(d)
                }
                else {
                  d.children = d._children;
                  d._children = null;
                }
            }
            update(d);
        }

当我单击父级时，它应该会自动打开左右两个孩子

任何帮助将不胜感激预先感谢所有帮助

Answer 1

您可以使用与初始化图表时调用的collapse函数类似的原理，但是此函数将展开所有节点。这是合适的expand函数（我已经在collapse函数下面的代码中插入了该代码）：

        expand = function(d) {
            if (d._children) {
                d.children = d._children;
                d.children.forEach(expand);
                d._children = null;
            }
        },

然后您只需要在nodeclick函数期间的适当时间调用它即可：

                if (d.children) {
                    _callerNode = d;
                    _callerMode = 0; // Collapse
                    d._children = d.children;
                    d.children = null;
                } else {
                    _callerNode = null;
                    _callerMode = 1; // Expand
                    // INSERT HERE!
                    // if the node depth is 2 or more, call the `expand` function
                    if ( d.depth >= 2 ) {
                      expand(d)
                    }
                    // otherwise, just do the standard node expansion
                    else {
                      d.children = d._children;
                      d._children = null;
                    }
                }

顺便说一下，您在彼此之间的两行之间有两个非常相似的代码位：

                    if (d.children) {
                        _callerNode = null;
                        _callerMode = 0; // Collapse
                        d._children = d.children;
                        //d._children.forEach(collapse);
                        d.children = null;
                    } else {
                        _callerNode = null;
                        _callerMode = 1; // Expand
                        if ( d.depth >= 2 ) {
                          expand(d)
                        }
                        else {
                          d.children = d._children;
                          d._children = null;
                        }
                    }
                    update(d);
                });
            } else {
                if (d.children) {
                    _callerNode = d;
                    _callerMode = 0; // Collapse
                    d._children = d.children;
                    d.children = null;
                } else {
                    _callerNode = null;
                    _callerMode = 1; // Expand
                    if ( d.depth >= 2 ) {
                      expand(d)
                    }
                    else {
                      d.children = d._children;
                      d._children = null;
                    }
                }
                update(d);
            }

您可以考虑对其进行重构，以使您没有重复的代码-例如制作新功能：

function expandCollapse(d, caller) {
    if (d.children) {
      _callerNode = caller;
      _callerMode = 0; // Collapse
      d._children = d.children;
      d.children = null;
    } else {
      _callerNode = null;
      _callerMode = 1; // Expand
      if ( d.depth >= 2 ) {
        expand(d)
      }
      else {
        d.children = d._children;
        d._children = null;
      }
    }
    update(d);
}

，然后将现有代码替换为expandCollapse(d, null)或expandCollapse(d, d)。

在D3 Js垂直树中单击，一次在父项下打开所有子项

1 个答案: