如何限制最初在 d3 力有向图中的节点数

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?

我编辑了你的fiddle：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();
          })

如何限制最初在 d3 力有向图中的节点数

How to restrict number of nodes initially in d3 Force directed graph

javascript

d3.js

angularjs

d3-force-directed