我正在使用d3.v3.min.js来显示像思维导图结构这样的数据。我有大量数据，因此显示数据非常不方便

Question

我在json文件中有超过100个数据作为子项，如何在chidren节点中只显示有限数量的数据。我有json数据，包含超过100data的子数组，我想只显示10个数据当我展开它时，节点和剩余数据应该隐藏它应该加载另一个数据，这应该为每个节点完成。任何人都可以帮助我。这是我的代码。

这是我的指示：

app.directive('mindMap', function () {
    return {
        link: function(scope, element) {


            var eleW = element[0].clientWidth,
                    eleH = element[0].clientHeight;

          var m = [20,40,20,80],
                  w = eleW - m[1] - m[3],
                  h = eleH - m[0] - m[2],
                  i = 0,
                  root;

            var tree = d3.layout.tree().size([h, w]);
            var diagonal = d3.svg.diagonal().projection(function(d) { return [d.y, d.x]; });
            var vis = d3.select(element[0]).append("svg:svg")
                .attr("width", w + m[1] + m[3])
                .attr("height", h + m[0] + m[2])
                .append("svg:g")
                .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
            // Toggle children.
            function toggle(d) {
              if (d.children) {
                d._children = d.children;
                d.children = null;
              } else {
                d.children = d._children;
                d._children = null;
              }
            }

            function toggleAll(d) {
            if (d.children) {
              d.children.forEach(toggleAll);
              toggle(d);
            }
          }


            scope.$watch('json' , function(){
                if(!(scope.json != null)){
                scope.json = {
                    "name" : "root"
                }
              }
              root = scope.json;
              root.x0 = h/2;
            root.y0 = 0;
                update(root);
                scope.root = root;
            });

            function update(source) {
        console.log(source);
              var duration = 500;
              if(!(source != null)){
                return;
              }

              // Compute the new tree layout.
              var nodes = tree.nodes(root).reverse();
              // Normalize for fixed-depth.
              var deepest = 0,
                    generationGutter = w;
              nodes.forEach(function(d){
                if(deepest < d.depth){
                    deepest = d.depth;
                }
              });
              generationGutter = Math.floor(w/(deepest+1));
              nodes.forEach(function(d) { d.y = d.depth * generationGutter; });

              // Update the nodes…

              var node = vis.selectAll("g.node")
                  .data(nodes, function(d) { return d.id || (d.id = ++i); });
            console.log(node);
              // Enter any new nodes at the parent's previous position.
              var nodeEnter = node.enter().append("svg:g")
                  .attr("class", "node")
                  .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; });

              //inject content to node
              InjectNodeContent(nodeEnter);

              // Transition nodes to their new position.
              var nodeUpdate = node.transition()
                  .duration(duration)
                  .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

              nodeUpdate.select("circle")
                  .attr("r", 4.5)
                  .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

              nodeUpdate.select("text")
                    .text(function(d) { return d.name; })
                  .style("fill-opacity", 1);

              // Transition exiting nodes to the parent's new position.
              var nodeExit = node.exit().transition()
                  .duration(duration)
                  .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
                  .remove();

              nodeExit.select("circle")
                  .attr("r", 1e-6);

              nodeExit.select("text")
                  .style("fill-opacity", 1e-6);

              // Update the links…
              var link = vis.selectAll("path.link")
                  .data(tree.links(nodes), function(d) { return d.target.id; });

              // Enter any new links at the parent's previous position.
              link.enter().insert("svg:path", "g")
                  .attr("class", "link")
                  .attr("d", function(d) {
                    var o = {x: source.x0, y: source.y0};
                    return diagonal({source: o, target: o});
                  })
                .transition()
                  .duration(duration)
                  .attr("d", diagonal);

              // Transition links to their new position.
              link.transition()
                  .duration(duration)
                  .attr("d", diagonal);

              // Transition exiting nodes to the parent's new position.
              link.exit().transition()
                  .duration(duration)
                  .attr("d", function(d) {
                    var o = {x: source.x, y: source.y};
                    return diagonal({source: o, target: o});
                  })
                  .remove();

              // Stash the old positions for transition.
              nodes.forEach(function(d) {
                d.x0 = d.x;
                d.y0 = d.y;
              });
            }


            function InjectNodeContent (nodeEnter) {
                nodeEnter.append("svg:circle")
                  .attr("r", 1e-6)
                  .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; })
                  .classed("toggleCircle" , true)
                  .on("click", function(d) {
                        toggle(d);
                        update(d);
                  });

              nodeEnter.append("svg:text")
                  .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
                  .attr("dy", ".35em")
                  .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
                  .text(function(d) { return d.name; })
                  .style("fill-opacity", 1e-6);

            }
        }
    }
});

我的示例JSON数据：

{
  "name": "Parent",
  "children": [
  {
    "name": "child1",
    "children": [

      {"name": "subchild1"},
      {"name": "subchild2"}
    ]
  },
  {
    "name": "child2",
    "children": [
      {"name": "subchild3"},
      {"name": "subchild4"}
    ]
  },
  {"name": "subchild5"},
  {"name": "subchild6"},
  {"name": "subchild7"},
  {"name": "subchild8"},
  {"name": "subchild9"}
  ]
}