How to render d3.layout.tree so that it spreads downwards (root at the top)

Question

I found a fantastic tree as below which meets almost my needs. However, I would like to expand lengthwise the tree. Could anyone give me any ideas how to make it or any reference sites. Any help will be appreciated.

http://mbostock.github.com/d3/talk/20111018/tree.html

Answer 1

In general, rotating is simple mathematical process.

If the original coordinates of the point are {x,y}:

{-y,x} = rotated 90° (anti-clockwise)
{y,-x} = rotated -90° (clockwise)
{-x,y} = mirrored along y-axis
{x,-y} = mirroded along x-axis
{-x,-y} = mirroded along both

These switches should be done in all path- and coordinate-calculations. Quite a job, I think.

Is it possible to include the whole pattern into single DIV? Then you could try to rotate this DIV with CSS3-transform.

Answer 2

The example tree you are looking at has actually been rotated from the default so that it is left to right. That's why in all the 'translate' statements, the x and y coordinates are swapped from where they would normally be.

To return this example to top to bottom orientation, do these two things:

1) For nodes: Swap the x and y coordinates in each of the translate statements:

.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })

should be changed to

.attr("transform", function(d) { return "translate(" + source.x0 + "," + source.y0 + ")"; })

and the same for all other "translate"s.

2) For links: Remove the '.projection' method from

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

So that it just says

var diagonal = d3.svg.diagonal();