如何限制最初在d3中的节点数量强制定向图

Question

这可能是另一个有待改进的问题，我在Existing question的帮助下做出了一个指令，该指令运行良好。

现在当用户动态创建该图表时，当数据加载超过时，浏览器变得沉重，用户界面卡住了。

如何在最初加载图表时将节点级别限制为2。 我试图一个接一个的服务电话，但这不起作用。

下面是代码：

function click(d) { 
        if (d3.event.defaultPrevented) return; // ignore drag 
        if (d.children) { 
         d._children = d.children; 
         d.children = null; 
        } else { 
         d.children = d._children; 
         d._children = null; 
        } 
        update(); 
       } 

Application with Data

Answer 1

希望这会助阵。从这个例子：How can I start with all the nodes collapsed in d3js?

我编辑你的提琴：http://jsfiddle.net/thatOneGuy/yar5sco6/7/

我去掉了原来的呼叫update()。所以你必须按Load然后Start。

这会折叠所有节点。从那里，你可以打开前两个层次相当容易:)

这是主要的实现：

// HTML

<button id='startForce'>START</button> 

// JS

document.getElementById('startForce').addEventListener('click', function() { 
      console.log('start'); 

      var nodes = flatten(root); 
      nodes.forEach(function(d) { 
       d._children = d.children; 
       d.children = null; 
      }); 
      update(); 
      })