javascript - D3 Tree Layout - Custom Vertical Layout when children exceed more than a certain number -

i'm trying use d3 tree layout create family tree of sorts , 1 of things noticed when have many children nodes, stretch out horizontally across screen. ideally more vertical layout these nodes people don't have scroll across screen , can keep looking down tree.

here see:

now might not bad, if had 20 children, span across whole screen , kind of want avoid.

i have seen questions this doesn't me because want specific layout , not resize... have large nodes , begin collide 1 if try dynamically resize tree -- shrinking tree not me good. i need different layout situations there more number of children.

here kind of envisioning/hoping for. notice root not make format because has 4 children. ideally want if parent has 5 or more children, result in layout below. if root had 5 children, result in layout , layout should stretch out vertically if users wanted see root's grandchildren (the a, b, c... nodes). if necessary can diagram of going:

i found semi-similar question regarding custom children layouts , said had play around actual d3js code. kind of want avoid hoping find out if possible d3js right and, if so, how go it? don't need complete answer, snippet of code proving possible helpful.

if necessary can upload jsfiddle people play around with.

check out fiddle:

http://jsfiddle.net/dyxzu/

i took sample code http://bl.ocks.org/mbostock/4339083 , made modifications. note in example, x , y switched when drawing layout appears vertical tree.

the important thing did modifying depth calculator:

original:

// normalize fixed-depth. nodes.foreach(function(d) { d.y = d.depth * 180; }); 

fixed:

// normalize fixed-depth. nodes.foreach(function (d) {     d.y = d.depth * 180;     if (d.parent != null) {         d.x =  d.parent.x - (d.parent.children.length-1)*30/2         + (d.parent.children.indexof(d))*30;     }     // if node has many children, go in , fix positions 2 columns.     if (d.children != null && d.children.length > 4) {         d.children.foreach(function (d, i) {             d.y = (d.depth * 180 + % 2 * 100);             d.x =  d.parent.x - (d.parent.children.length-1)*30/4             + (d.parent.children.indexof(d))*30/2 - % 2 * 15;         });     } }); 

basically, manually calculate position of each node, overriding d3's default node positioning. note there's no auto-scaling x. figure out manually first going through , counting open nodes (d.children not null if exist, d._children stores nodes when closed), , adding total x.

nodes children in two-column layout little funky, changing line-drawing method should improve things.