D3.js可折疊力布局，默認情況下折疊

Question

我想使用默認情況下折疊的可折疊力圖（僅從一個節點開始）。 我遇到了這個問題： http : //bl.ocks.org/david4096/6168323，但它為空白且無法正常工作。 我正在使用最新的Mozilla Firefox 43.0.4。 我什至把它放到punker上，結果也一樣-空白。

有人可以找出問題所在嗎？

還可以將其部分折疊嗎？ 那意味着第一批孩子擴大了，但其他一切都崩潰了？

我在punker上不工作的例子

我相信可以通過修改更新功能來實現。

在json數據表中將“ children”更改為“ _children”不能正常工作。

function update(d) {

  var nodes = flatten(root),
      links = d3.layout.tree().links(nodes);

  // Restart the force layout.
  force
      .nodes(nodes)
      .links(links)
      .start();

我在這里看： d3.js的所有節點都折疊的可折疊力布局，這里： 如何從d3js中的所有節點折疊開始？

沒有一種解決方案對我有用。

將感謝您的任何建議。

更新28.1.2018

由於下面的答案，效果很好。

這是一個工作示例： http : //plnkr.co/edit/QtFXa53Q7p65NQpO4z5f?p=preview

Answer 1

基本上，我根據名稱在節點上的圈子中添加了ID：

.append("circle").attr('id', function(d){ return d.name})

然后，我填充了所有父級孩子名字的數組，即要折疊的節點：

if(parentschildren.length<1){ //so it doesn't populate it more than once
          node.filter(function(d){
            //console.log(d.name)
            return d.name === 'PARENT' //return just the parent node
          }).each(function(d){
            for(i=0;i<d.children.length;i++){
              parentschildren.push(d.children[i].name);
            }

          });
          }

然后，我使用填充的數組循環遍歷選擇要單擊的節點，並調用單擊函數，該函數模擬對選定節點的單擊：

function simulateClick(){


        $.fn.d3Click = function (i) { //simulate click
          //if(i===0){
  this.each(function (i, e) {

    var evt = document.createEvent("MouseEvents");
    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
console.log(e);

    e.dispatchEvent(evt);
   // nodeEnter.on("click", click)
    evt.stopPropagation()


  }); //}
};

for(i=0;i<parentschildren.length;i++){ //loop through created array

$('#'+parentschildren[i]).d3Click(); //select element to click
}
    }

至於唯一的ID，我會做這樣的事情：

node.each(function(d,i){ // use i to iterate through
d.uniqueID = 'uniqueNode' + i;
}

這段代碼將為每個代碼賦予唯一的值。 因此，第一個將是uniqueNode1，然后是uniqueNode2，依此類推。 然后將其應用於您的節點：

nodes.attr('id'(function(d){
return d.uniqueID;
})

至於您的其他問題（我認為您應該在此問題上添加而不是在評論中，這樣人們就會知道我的答案為何如此之大），這就是該問題的答案。

為了使所有節點開始折疊，我使用了遞歸函數，您已經必須填充一個數組以給您有子節點的節點：

var nodes2 = [];
function flatten(root) {
      var nodes = [], i = 0;

      function recurse(node) {
        if (node.children) {
          nodes2.push(node.name) //push the name of the node to the array
          node.children.forEach(recurse);
        }
        if (!node.id) node.id = ++i;
        nodes.push(node);
    }

      recurse(root);
      console.log(nodes2)
      return nodes;
    }

現在，正如我之前所說，我已經根據名稱給了他們ID，因此要選擇它們，我要做的就是遍歷這個新的節點數組（nodes2），然后單擊與該元素中每個元素具有相同ID的節點數組。 但是您不能立即執行此操作，因為此數組從最高點（PARENT）開始並下降，所以我不得不反轉數組：

var newNodes = [];
  for(i=nodes2.length; i>=0; i--){
    newNodes.push(nodes2[i])
  }

現在，使用此數組進行迭代以選擇具有相同ID的節點：

for(i=0;i<newNodes.length;i++){
 if(newNodes[i]){ //check if i isnt undefined etc
   $('#'+newNodes[i]).d3Click();
 }

}

然后根據需要，再次單擊父級兩次（先關閉再打開）：

$('#PARENT').d3Click();

$('#PARENT').d3Click();

希望能解決您所有的問題，這是最終更新的plnkr： http ://plnkr.co/edit/QtFXa53Q7p65NQpO4z5f?p=preview