CODEWITHSUNDEEP
javascriptangularjsd3.jsd3-force-directed
Sajeetharan
Sajeetharan

Reputation: 222592

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

This could be another question on improvement, i have made a directive with the help of Existing question, which is working well.

now when the user creates this chart dynamically, when the data load exceeds, the browser becomes heavy and user interface gets stuck.

how do i restrict the nodes level to be 2 , when the chart is loaded initially. i tried to make a service call one by one, but that does not work.

Here is the code:

 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

Upvotes: 2

Views: 258

Answers (1)

thatOneGuy
thatOneGuy

Reputation: 10612

Hopefully this will help out. From this example : How can I start with all the nodes collapsed in d3js?

I edited your fiddle : http://jsfiddle.net/thatOneGuy/yar5sco6/7/

I removed the original call to update(). So you have to press Load then Start.

This collapses all nodes. From there you can open up the first two hierarchies fairly easy :)

This is the main implementation :

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

Upvotes: 2

Related Questions