Javascript 首先，除d3 force布局中的根节点外，所有节点都已折叠

我有一些节点具有相同的子节点，所以我想知道是否有任何方法可以使用根节点启动图形，然后当我单击第一级中的“显示子节点”时，我单击其中一个子节点“显示其他节点”。我尝试了几件事，但仍然无法弄清楚如何访问数据并在开始时将其折叠。你能帮忙吗

这是

var根；
风险价值水平=1；
变量数据集={
“节点”：[{
“id”：111，
“类型”：“父级”，
“名称”：“父项”，
“财产”：{
}
}, {
“id”：112，
“类型”：“子项”，
“名称”：“f2”，
“财产”：{
}
}, {
“id”：113，
“类型”：“子项”，
“名称”：“f3”，
“财产”：{
}
}, {
“id”：114，
“类型”：“子项”，
“名称”：“f4”，
“财产”：{
}
}, {
“id”：115，
“类型”：“子项”，
“名称”：“f5”，
“财产”：{
}
}, {
“id”：116，
“类型”：“孙子”，
“名称”：“f6”，
“财产”：{
}
}, {
“id”：117，
“类型”：“孙子”，
“名称”：“f7”，
“财产”：{
}
}, {
“id”：118，
“类型”：“孙子”，
“名称”：“f8”，
“财产”：{
}
}, {
“id”：119，
“类型”：“孙子”，
“名称”：“f9”，
“财产”：{
}
}, {
“id”：120，
“类型”：“孙子”，
“名称”：“f10”，
“财产”：{
}
}, {
“id”：121，
“类型”：“孙子”，
“名称”：“f11”，
“财产”：{
}
}],
“边缘”：[{
“id”：0，
“from”：111，
“至”：120，
“财产”：{
}
},{
“id”：0，
“from”：111，
“至”：121，
“财产”：{
}
},{
“id”：0，
“from”：111，
“至”：112，
“财产”：{
}
},{
“id”：0，
“from”：111，
“至”：113，
“财产”：{
}
},{
“id”：0，
“from”：111，
“至”：114，
“财产”：{
}
},{
“id”：0，
“from”：112，
“至”：116，
“财产”：{
}
}, {
“id”：0，
“from”：112，
“至”：117，
“财产”：{
}
}, {
“id”：0，
“from”：112，
“至”：118，
“财产”：{
}
}, {
“id”：0，
“from”：116，
“至”：119，
“财产”：{
}
}
, {
“id”：0，
“from”：116，
“至”：114，
“财产”：{
}
}]
}
可变宽度=960，
高度=1000；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var-force=d3.layout.force（）
.尺寸（[宽度、高度]）
.on（“滴答”，滴答）
//重力（0.2）
.连接距离（高度/13）
.费用（功能（节点）{
如果（node.type！=“ORG”）返回-2000；
返回-30；
});
//建造箭头。
追加（“svg:defs”）。选择全部（“标记”）
.data（[“end”]）//可以在此处定义不同的链接/路径类型
.enter（）.append（“svg:marker”）//此部分在箭头中添加
.attr（“id”，函数（d）{
返回d；
})
.attr（“视图框”，“0-5 10”）
.attr（“参考文献”，第12页）
.attr（“参考文献”，0）
.attr（“markerWidth”，9）
.attr（“markerHeight”，5）
.attr（“方向”、“自动”）
.attr（“类”、“箭头”）
.append（“svg:path”）
.attr（“d”，“M0，-5L10,0L0,5”）；
var-json=数据集；
var边缘=[]；
forEach（函数（e）{
var sourceNode=json.nodes.filter（函数（n）{
返回n.id==e.from；
})[0],
targetNode=json.nodes.filter（函数（n）{
返回n.id==e.to；
})[0];
推({
来源：sourceNode，
目标：targetNode，
价值：e.价值
});
});
对于（var i=0；i您尝试了什么？请共享，以便我们可以提供更多帮助。我首先需要折叠的子节点。我使用此代码搜索了很多次，但找不到任何方法。
  var  root;
  var COLLAPSE_LEVEL = 1;
  var dataset = {
  "nodes": [{
    "id": 111,
    "type": "Parent",
    "name":"parent",
    "properties": {

    }
  }, {
    "id": 112,
    "type": "Child",
    "name":"f2",
    "properties": {

    }
  }, {
    "id": 113,
    "type": "Child",
    "name":"f3",
    "properties": {

    }
  }, {
    "id": 114,
    "type": "Child",
    "name":"f4",
    "properties": {

    }
  }, {
    "id": 115,
    "type": "Child",
    "name":"f5",
    "properties": {

    }
  }, {
    "id": 116,
    "type": "Grandchild",
     "name":"f6",  
    "properties": {

    }
  }, {
    "id": 117,
    "type": "Grandchild",
     "name":"f7",  
    "properties": {

    }
  }, {
    "id": 118,
    "type": "Grandchild",
     "name":"f8",  
    "properties": {

    }
  }, {
    "id": 119,
    "type": "Grandchild",
     "name":"f9",  
    "properties": {

    }
  }, {
    "id": 120,
    "type": "Grandchild",
     "name":"f10",  
    "properties": {

    }
  }, {
    "id": 121,
    "type": "Grandchild",
     "name":"f11",  
    "properties": {

    }
  }],
  "edges": [{
    "id": 0,
    "from": 111,
    "to": 120,
    "properties": {

    }
  },{
    "id": 0,
    "from": 111,
    "to": 121,
    "properties": {

    }
  },{
    "id": 0,
    "from": 111,
    "to": 112,
    "properties": {

    }
  },{
    "id": 0,
    "from": 111,
    "to": 113,
    "properties": {

    }
  },{
    "id": 0,
    "from": 111,
    "to": 114,
    "properties": {

    }
  },{
    "id": 0,
    "from": 112,
    "to": 116,
    "properties": {

    }
  }, {
    "id": 0,
    "from": 112,
    "to": 117,
    "properties": {

    }
  }, {
    "id": 0,
    "from": 112,
    "to": 118,
    "properties": {

    }
  }, {
    "id": 0,
    "from": 116,
    "to": 119,
    "properties": {

    }
  }
           , {
    "id": 0,
    "from": 116,
    "to": 114,
    "properties": {

    }
  }]
}

var width = 960,
  height = 1000;

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);

var force = d3.layout.force()
  .size([width, height])
  .on("tick", tick)
  //gravity(0.2)
  .linkDistance(height / 13)
  .charge(function(node) {
    if (node.type !== 'ORG') return -2000;
    return -30;
  });

// build the arrow.
svg.append("svg:defs").selectAll("marker")
  .data(["end"]) // Different link/path types can be defined here
  .enter().append("svg:marker") // This section adds in the arrows
  .attr("id", function(d) {
    return d;
  })
  .attr("viewBox", "0 -5 10 10")
  .attr("refX", 12)
  .attr("refY", 0)
  .attr("markerWidth", 9)
  .attr("markerHeight", 5)
  .attr("orient", "auto")
  .attr("class", "arrow")
  .append("svg:path")
  .attr("d", "M0,-5L10,0L0,5");

  var json = dataset;

  var edges = [];
  json.edges.forEach(function(e) {
    var sourceNode = json.nodes.filter(function(n) {
        return n.id === e.from;
      })[0],
      targetNode = json.nodes.filter(function(n) {
        return n.id === e.to;
      })[0];

    edges.push({
      source: sourceNode,
      target: targetNode,
      value: e.Value
    });
  });

  for(var i=0; i<json.nodes.length; i++) {
    json.nodes[i].collapsing = 0;
    json.nodes[i].collapsed = false;
  }

  var link = svg.selectAll(".link");
  var node = svg.selectAll(".node");

  force.on("tick", function() {
    // make sure the nodes do not overlap the arrows
    link.attr("d", function(d) {
      // Total difference in x and y from source to target
      diffX = d.target.x - d.source.x;
      diffY = d.target.y - d.source.y;

      // Length of path from center of source node to center of target node
      pathLength = Math.sqrt((diffX * diffX) + (diffY * diffY));

      // x and y distances from center to outside edge of target node
      offsetX = (diffX * d.target.radius) / pathLength;
      offsetY = (diffY * d.target.radius) / pathLength;

      return "M" + d.source.x + "," + d.source.y + "L" + (d.target.x - offsetX) + "," + (d.target.y - offsetY);
    });

    node.attr("transform", function(d) {
      return "translate(" + d.x + "," + d.y + ")";
    });
  });

update();

function update(){
  var nodes = json.nodes.filter(function(d) {
    return d.collapsing == 0;
  });

  var links = edges.filter(function(d) {
    return d.source.collapsing == 0 && d.target.collapsing == 0;
  });

  force
    .nodes(nodes)
    .links(links)
    .start();

  link = link.data(links)

  link.exit().remove();

  link.enter().append("path")
    .attr("class", "link")
    .attr("marker-end", "url(#end)");

  node = node.data(nodes);

  node.exit().remove();

  node.enter().append("g")
    .attr("class", function(d) {
      return "node " + d.type
    });

  node.append("circle")
    .attr("class", "circle")
    .attr("r", function(d) {
      d.radius = 10;
      return d.radius
    }); // return a radius for path to use 
   //make lable for circles
 // node.append("text")
    //.attr("x", 0)
   // .attr("dy", ".35em")
   // .attr("text-anchor", "middle")
  //  .attr("class", "text")
  //  .text(function(d) {
   //   return d.name
   // });

  // On node hover, examine the links to see if their
  // source or target properties match the hovered node.
  node.on('mouseover', function(d) {
    link.attr('class', function(l) {
      if (d === l.source || d === l.target)
        return "link active";
      else
        return "link inactive";
    });
  });

  // Set the stroke width back to normal when mouse leaves the node.
  node.on('mouseout', function() {
    link.attr('class', "link");
  })
  .on('click', click);

  function click(d) {
    if (!d3.event.defaultPrevented) {
      var inc = d.collapsed ? -1 : 1;
      recurse(d);

      function recurse(sourceNode){
        //check if link is from this node, and if so, collapse
        edges.forEach(function(l) {
          if (l.source.id === sourceNode.id){
            l.target.collapsing += inc;
                        recurse(l.target);
          }
        });
      }
      d.collapsed = !d.collapsed;
    }      
    update();
  }
}
              function tick() {
        link.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

        node.attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });

        t.attr("x", function(d) { return d.x; })
        .attr("y", function(d) { return d.y; }); 

      }
  var tooltip = d3.select("body")
  .append("div")
  .attr('class', 'tooltip');
  var circles = svg.selectAll("circle");
        circles.on("mouseover", function(d) {
    return tooltip.style("visibility", "visible").text(d.name);
  })

  // we move tooltip during of "mousemove"

  .on("mousemove", function() {
    return tooltip.style("top", (event.pageY - 30) + "px")
      .style("left", event.pageX + "px");
  })

  // we hide our tooltip on "mouseout"

  .on("mouseout", function() {
    return tooltip.style("visibility", "hidden");
  });
    </script>