d3.js - Tree drawing orientation

Question

I've made a slightly modified tree using the tree layout. I needed to orient the tree right-to-left instead of the regular left-to-right orientation that's the default. What is the right and proper d3:ish way to do this?

I ended up doing this by simply inverting the x coordinate after creating the layout but I feel that this is a hack. Surely there is something more elegant?

I thought about doing an SVG rotation around the center but then I'd have to rotate the labels to get the text right way around. That didn't feel right either.

Answer 1

The tree layout computes node positions in an arbitrary coordinate space of breadth (x) and depth (y). To change the orientation of the layout, change the mapping from the layout’s coordinate space to SVG pixel coordinates. If you prefer not to do the mapping manually, you could use quantitative scales to specify a more intuitive (but more verbose) mapping.

Here’s an example showing four different orientations:

• http://bl.ocks.org/3184089