17

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.

VividD
  • 10,456
  • 6
  • 64
  • 111
Jyrsa
  • 438
  • 1
  • 3
  • 7

1 Answers1

29

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:

Optimus
  • 1,354
  • 1
  • 21
  • 40
mbostock
  • 51,423
  • 13
  • 175
  • 129
  • There is a bug / typo in line 26: "http:" is missing in front of the link – Thorsten Niehues Nov 16 '16 at 12:19
  • Can u please further explain? I have average HTML and JS knowledge and a working application (expandable / clickable tree from left to right) and I would like to make it top to bottom. – Thorsten Niehues Nov 16 '16 at 12:58
  • I changed x and y in two places in productTree.js one made the tree structure vertical and the other one made the labels in the correct place. Unfortunately the tree does not get boarder, hence the labels are on top of each other :/ – Thorsten Niehues Nov 16 '16 at 13:08