Right to left tree graph

[immnk]

Hi. I want to know if I can change the orientation of the graph. For example, instead of left to right graph, I want a right to left graph.

If I use css transform, it mirrors the text as well.

[jpb12]

You can do it, but it's a bit more complicated than just a single transform. I've created an example commit changing the tree-viewer demo to right-to-left: https://github.com/jpb12/tree-viewer/commit/788fc16c0b4d033a542e4882455fe27372a16ff9

svg {
	transform: scaleX(-1);
}

svg > g {
	/* Margin for the root node from the right side of the tree container */
	transform: translateX(20px);
}

.node circle {
	/* Undoes the reverse text from the svg transform */
	transform: scaleX(-1);
	/* Moves the text to the left of the node */
	direction: rtl;
}

You will also need to invert the text offset so the text does not appear in front of the node. By default, the offset is the radius of the circle (5) plus 0.5, so if you're using circles with the default radius, you need to set to -5.5.

<Tree
	textProps={{
		dx: -5.5,
	}}
	.../>);

Will think about adding a simpler way of doing this in a future release.

[jpb12]

This can now be done using direction=rtl,