2

我有一个 D3.js可折叠树，它有一堆节点。树中有几条路径，其中存在只有一个子节点的节点序列。想象一下这棵树：

               5
              /
1 - 2 - 3 - 4 -6
              \
               7

单击节点时1，我希望它变为：

      5
     /
1 - 4 -6
     \
      7

现在我的代码正常展开和折叠节点。如何选择这些中间节点，以便可以像现在一样使用切换功能定位它们？

我的代码与示例中的代码基本相同，除了我添加的一些与此问题无关的内容。该toggle()函数接收指向 a 的指针node并使可见的子节点（在children数组中）不可见（通过将它们移动到它们的_children数组）。这会将所有孩子（以及孙子和曾孙...）击中到该特定节点，但是我需要它在找到正好有1 个孩子的节点时继续，然后，如果它找到一个没有孩子的节点，我希望它可见；如果节点有超过 1 个子节点，我希望它从那时起显示所有子节点。

这是toggle()在其中一个节点中调用 onclick 的功能代码：

function toggle(d) {
    var myLength;
    if(d.children){myLength = d.children.length;}
    else{myLength=0;}

    if (myLength === 1) {
        //next will be the first node we find with more than one child
        var next = d.children[0];
        for (;;) {if(next.hasOwnProperty('children')){
            if (next.children.length === 1) {
                next = next.children[0];
            } else if (next.children.length > 1) {
                break;
                }
            } else {
                // you'll have to handle nodes with no children
                break;
            }
        }
        d._children = d.children;
        d.children = [next];
    }else{
        if (d.children) {
            d._children = d.children;
            d.children = null;
        } else {
            d.children = d._children;
            d._children = null;
        }
    }
}
4

2 回答 2

2

该切换功能不进行任何类型的逻辑检查，它只是删除和添加子项。为了做你想做的事，你需要使用一些逻辑和数据遍历，但这并非不可能。尝试这样的事情：

function toggle(d) {
    if (d.children.length === 1) {
        //next will be the first node we find with more than one child
        var next = d.children[0];
        for (;;) {
            if (next.children.length === 1) {
                next = next.children[0];
            } else if (next.children.length > 1) {
                break;
            } else {
                //you'll have to handle nodes with no children
            }
        }

        d._children = d.children;
        d.children = [next];
    }
}
于 2013-07-03T15:05:59.333 回答
0 
function toggleChildren(d) {

    var myLength;

    if (d.toggle !== "close") {
        if(d.children){
            myLength = d.children.length;
        }else{
            myLength=0;
        }
        d._children = d.children;
        if (myLength === 1){
            //next will be the first node we find with more than one child
            var next = d.children[0];
            for (;;) {if(next.hasOwnProperty('children')){
                if (next.children.length === 1) {
                    next = next.children[0];
                } else if (next.children.length > 1) {
                    break;
                }
            } else {
                // you'll have to handle nodes with no children
                break;
            }
            }
            d.children = [next];
            //d._children = d.children;
            d.toggle = "close"
        }else{
            if (d.children) {
                d._children = d.children;
                d.children = null;
            } else {
                d.children = d._children;
                d._children = null;
            }
        }
    }else{
        if(d.toggle == "close"){
            var _children = d.children;
            d.children  = d._children;
            d._children =   _children;
            d.toggle = "open"
        }else{
            if (d.children) {
                d._children = d.children;
                d.children = null;
            } else {
                d.children = d._children;
                d._children = null;
            }
        }

    }
    return d;
}
于 2015-05-07T04:14:36.650 回答