D3.js可摺疊樹 - 展開/摺疊中間節點

Question

我有一個D3.js collapsible tree它有一堆節點。樹中有幾條路徑，其中只有一個孩子的節點序列。想象一下這棵樹：

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

當點擊1節點，我希望它變成：

 5 
    /
1 - 4 -6 
    \ 
     7 

現在我的代碼擴展和正常崩潰節點。我如何選擇這些中間節點節點，以便我可以像我現在那樣使用切換功能來定位它們？

我的代碼基本上和例子中的一樣，除了我添加的一些與這個問題無關的東西。 toggle()函數收到指向node的指針，並使可見子節點（在children數組中）不可見（通過將它們移動到它們的_children數組中）。這對所有特定的節點都有全部孩子（以及孫輩，曾孫，......），但是我需要它繼續，而它找到的節點正好是 1孩子，那麼，如果它發現一個節點沒有孩子，我希望它可以看到;如果節點有一個以上的孩子，我希望它從這一點顯示所有人。

這是在一個節點的onclick稱爲toggle()功能代碼：

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; 
     } 
    } 
} 

Answer 1

那切換功能沒有做任何類型的邏輯檢查的，它只是刪除，並增加了孩子。要做你想做的事，你需要使用一些邏輯和數據遍歷，但這不是不可能的。嘗試是這樣的：

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]; 
    } 
} 

Answer 2

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; 
}