Render a right-to-left tree with D3.js

Recently I needed to render a right-to-left D3.js tree to visualize the mapping of multiple entities into one (as opposed to branching of one entity into many). The right way to do it is to tweak the d3.linkHorizontal() so instead of:

const link = d3.linkHorizontal()
    .x(d => d.y)
    .y(d => d.x);

it could be like:

const link = d3.linkHorizontal()
    .x(d => width - d.y)
    .y(d => d.x);

But that's not all that you have to do. The Internet is full of unanswered StackOverflow questions and obsolete examples. My approach is probably not the best one, but it works for me: I let D3.js to render a normal left-to-right tree, then flip it horizontally via transform, flip all the texts back with another transform, and finally invert the text anchors, so the labels are where they have to be:

  svg.attr("transform", "scale(-1, 1)");
  svg
    .selectAll("text")
    .attr("transform", "scale(-1, 1)")
    .attr("text-anchor", (d) => (d.depth === 0 ? "start" : "end"))
    .attr("x", function (d) {
      return d3.select(this).attr("text-anchor") === "start" ? 6 : -6;
    });

Here is the result:

https://observablehq.com/@romaklimenko/right-to-left-tidy-tree