D3 trim hierarchical data by depth?

Question

I'm using D3 pack layout and my data is very large.

So the problem is the data is too large to be rendered smoothly. I want to trim the data by it's depth but I'm totally at loss about how to do that.

The only thing I can think of is to write a recursive function to trim the whole data at each fresh.

[psudo]
trim = function(node, depth){
  if ( depth == 0 ) return null;
  foreach(node.child) node.child = trim(node.child, depth - 1);
}

But I think there must be ways to handle it here:

  vis.selectAll("circle")
      .data(nodes)
    .enter().append("svg:circle")
      .attr("class", ...)

Answer 1

Here is an example of a similar case: http://bl.ocks.org/mbostock/4339083

The dataset is not large, but the treatment is similar to your approach. When the hierarchical data is first loaded, it is modified by collapsing all descendants of the root. Here only the root is left open. In your case you could choose to leave additional levels open initially. See the recursive collapse function below:

d3.json("/d/4063550/flare.json", function(error, flare) {
    root = flare;
    root.x0 = height / 2;
    root.y0 = 0;

    function collapse(d) {
        if (d.children) {
            d._children = d.children;
            d._children.forEach(collapse);
            d.children = null;
        }
    }

    root.children.forEach(collapse);
    update(root);
});

Then later, as the user drills down (here in response to a node click, in your case maybe in response to something else) each node is adjusted accordingly:

// Toggle children on click.
function click(d) {
    if (d.children) {
        d._children = d.children;
        d.children = null;
    } else {
        d.children = d._children;
        d._children = null;
    }
    update(d);
}

All this does is hide the children from whatever hierarchical layout you apply. The update function redraws the hierarchy as if those hidden levels don't exist.