D3 collapsing cluster layout

Question

I am working with large data sets and am using D3's (radial) cluster dendrogram to display the data,

http://bl.ocks.org/mbostock/4339607

I am trying to implement a form of collapsibility on the d3 cluster class like it is seen in the tree class here,

http://bl.ocks.org/mbostock/4339083

However I need the graph to have a constant size. More specifically the radius cannot change, so the minimum graph would be two nodes (one in the middle node and one leaf node). Then clicking into the internal nodes would populate the edge of the graph with leaf nodes, and update all existing internal nodes and links.

I have been trying to hack a d3 update function as seen in the tree class, but I am having no luck. Has anybody been able to solve this issue (or circumvent it)?

I am not attached to the cluster layout, but I do need to have the constant size (this is the only D3 layout I have found that supports this).

Answer 1

I have mixed the two layout. This will collapse all the nodes initially:

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

data.children.forEach(collapse);
update(data);//this will draw all the nodes and links

The click function:

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

Full code here.