2

ノードの束を持つD3.js折りたたみ可能なツリーがあります。ツリーには、子が 1 つしかない一連のノードがあるパスがいくつかあります。このツリーを想像してください:

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

ノードをクリックする1と、次のようになります。

      5
     /
1 - 4 -6
     \
      7

現在、私のコードはノードを正常に展開および折りたたみます。これらの中間ノードを選択して、現在行っているようにトグル機能でそれらをターゲットにするにはどうすればよいですか?

私のコードは基本的に例と同じですが、この質問に関係のないものをいくつか追加しました。このtoggle()関数は a へのポインターを受け取り、node(配列内の) 可視の子ノードを非可視childrenにします (それらを_children配列に移動することによって)。これにより、すべての子 (および孫、ひ孫など) がその特定のノードにヒットしますが、子が 1 つだけあるノードが見つかるまで続行する必要があり、子を持たないノードが見つかった場合は、見えるようにしたい。ノードに複数の子がある場合、その時点からすべての子を表示したいと思います。

これはtoggle()、ノードの 1 つで 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 に答える