D3.js 可折叠力布局，默认折叠

Question

我想使用默认情况下折叠的可折叠力图（从只有一个节点开始）。我运行穿过这个：http://bl.ocks.org/david4096/6168323 但它是空白的，无法正常工作。我使用的是最新的 Mozilla Firefox 43.0.4。我什至把它放到 plunker 中得到了同样的结果——空白。

有人能找出问题所在吗？

还有可能部分折叠吗？这意味着第一组 children 扩展但其他所有内容都崩溃了？

My non-working example on plunker

我相信可以通过修改更新功能来实现。

将 json 数据 sheet 中的 "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 collapsible force layout with all the nodes collapsed and here: How can I start with all the nodes collapsed in d3js?

None 的解决方案对我有用。

如有任何建议，我们将不胜感激。

2018 年 1 月 28 日更新

由于以下答案，效果很好。

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

Answer 1

基本上，我根据名称将 ID 添加到节点上的圆圈中：

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

然后我填充了所有 parents childrens 名称的数组，即要折叠的节点：

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

          });
          }

然后我使用填充的数组循环到 select 我想点击的节点并调用点击函数模拟点击 selected 节点 :

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

至于您的其他问题（我认为您应该将其添加到这个问题中而不是在评论中，以便人们知道为什么我的回答如此之大）这里是答案。

为了让所有节点都开始折叠，我使用了递归函数，你已经必须填充一个数组来为你提供具有 children 的节点：

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，所以对于 select 它们，我所要做的就是遍历这个新的节点数组 (nodes2) 并单击与该数组中的每个元素具有相同的 ID。但是你不能马上这样做，因为这个数组从最高点 (PARENT) 开始下降，所以我不得不反转数组：

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

现在使用此数组遍历 select 具有相同 ID 的节点：

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

}

然后再次单击 parent 两次（先关闭再打开）selected:

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

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

希望这能解决您所有的问题，这是最终更新的 plnkr：http://plnkr.co/edit/QtFXa53Q7p65NQpO4z5f?p=preview

D3.js 可折叠力布局，默认折叠

D3.js Collapsible Force Layout, collapsed by default

javascript

diagram

d3.js