Learn D3.js

Horizontal trees

If you switch x for y, the tree will be drawn sideways, with the root on the left-hand side. The path link generator, in this case, requires configuration, since the coordinates have to be swapped:

const horizontalLink = d3.linkHorizontal()         .x(function(d) { return d.y; })         .y(function(d) { return d.x; });

Node elements need to be translated by using d.y as x, and d.x as y:

chart.selectAll("g.node")     ...     .attr("transform", d => `translate(${[d.y, d.x]})`)

But the path selection just requires the new function:

chart.selectAll("path")     ...     .attr("d", horizontalLink) // d => horizontalLink(d)

The text labels also no longer require the 90-degree rotation. The result, for a tidy tree, is shown as follows:

A horizontal tree. Code: ...