Tree drawing orientation

d3.js hierarchy
Jyrsa picture Jyrsa · Jul 26, 2012 · Viewed 10.5k times · Source

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

mbostock picture mbostock · Jul 26, 2012

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:

Related questions

how to encode this data to parent / children structure in JSON

I am working with d3.js to visualise families of animals (organisms) (up to 4000 at a time) as a tree graph, though the data source could just as well be a directory listing, or list of namespaced objects. my data …

Read More
Use d3 log scale instead of linear scale

I'm trying to do a chart based on http://mbostock.github.com/d3/talk/20111116/bar-hierarchy.html, the only difference being that I'd like to use a log scale for the x-axis. Here's my fiddle: http://jsfiddle.net/JhDVC/5/ As you …

Read More
Collapse/expand child nodes of tree in d3.js?

I'm building a tree structure (or rather modifying one of the examples with a set of my own data in my own json) and I'm trying to create some functionality: My tree's layout is that from the tree example: http://…

Read More