score:1

updated: now takes into account children that aren't shown, using the idea from @gilsha's answer.


sure, you can set each <circle>'s radius proportional to the number of children they have:

node.select("circle")
    .attr("r", function(d){
         var numkids = 0;
         if (d.children) numkids += d.children.length;
         if (d._children) numkids += d._children.length;
         return 10 * (numkids + 1);
})

where r is some radius. using r=10 and toggling on the "wafer" node, you get this: enter image description here

score:1

for a complete solution, you'll actually want to use a recursive function to first calculate the total children (not just first-level children) of each node. for example:

var bubble_up_total_children = function(node) {
  var child, _i, _len, _ref;
  if (node.children && node.children.length > 0) {
    _ref = node.children;
    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
      child = _ref[_i];
      bubble_up_total_children(child);
    }
    node.total_children = node.children.length + node.children.reduce(function(a, b) {
      return a.total_children + b.total_children;
    });
  } else {
    node.total_children = 0;
  }
};

bubble_up_total_children(root);

from there you can now use d3.scale as already documented in @gilsha's answer to calculate size based on the new total_children attribute on each node.

score:8

you can use d3.scale.linear for calculating radius of nodes proportional to the number of children. d3.scale also helps to find a radius in between a range. here is the updated fiddle

 var minradius = 10;
 var maxradius = 15;
 var scale = d3.scale.linear().range([minradius,maxradius]);
 nodeenter.append("circle")
    .attr("r", function(d) { 
        if(d.children)
            return scale(d.children.length);
        else if(d._children)
            return scale(d._children.length);
        else
            return minradius;
    });

Related Query