时间戳

首页 > 解决方案 > 在 D3 Js 垂直树中单击一次在父项下打开所有子项

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

问题描述

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

单击第三个父级后，它应该立即打开所有左右子级，如果当我单击父级时所有子级都处于打开状态，它应该全部关闭。为了左右我在嵌套的 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);
        }

当我单击父级时，它应该自动打开左右子级以后我可能还会为父级 2 获得更多左右子级

任何帮助将不胜感激提前感谢所有帮助

标签： javascriptd3.js

解决方案

您可以使用与您在启动图表时调用的函数类似的原理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)or替换现有代码expandCollapse(d, d)。

推荐阅读