31:T50c,md`# Right-to-Left Tidy Tree 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()](https://github.com/d3/d3-shape#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](https://bl.ocks.org/mbostock/3184089). 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:`32:T688,chart = { const root = tree(data); let x0 = Infinity; let x1 = -x0; root.each((d) => { if (d.x > x1) x1 = d.x; if (d.x < x0) x0 = d.x; }); const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, x1 - x0 + root.dx * 2]); const g = svg .append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("transform", `translate(${root.dy / 3},${root.dx - x0})`); const link = g .append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5) .selectAll("path") .data(root.links()) .join("path") .attr( "d", d3 .linkHorizontal() .x((d) => d.y) .y((d) => d.x) ); const node = g .append("g") .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .selectAll("g") .data(root.descendants()) .join("g") .attr("transform", (d) => `translate(${d.y},${d.x})`); node .append("circle") .attr("fill", (d) => (d.children ? "#555" : "#999")) .attr("r", 2.5); node .append("text") .attr("dy", "0.31em") .attr("x", (d) => (d.children ? -6 : 6)) .attr("text-anchor", (d) => (d.children ? "end" : "start")) .text((d) => d.data.name) .clone(true) .lower() .attr("stroke", "white"); // here: ->> 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; }); // <<- return svg.node(); }33:[{"id":"e65374209781891f37dea1e7a6e1c5e020a3009b8aedf113b4c80942018887a1176ad4945cf14444603ff91d3da371b3b0d72419fa8d2ee0f6e815732475d5de","href":"https://static.observableusercontent.com/files/e65374209781891f37dea1e7a6e1c5e020a3009b8aedf113b4c80942018887a1176ad4945cf14444603ff91d3da371b3b0d72419fa8d2ee0f6e815732475d5de","name":"flare-2.json","type":"application/octet-stream","lastModified":1619766868470.184,"size":11634}] 2f:{"title":"Right-to-Left Tidy Tree","cells":[{"id":1,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"data = FileAttachment(\"flare-2.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"tree = (data) => {\n const root = d3.hierarchy(data);\n // pruned\n root.descendants().forEach((d) => {\n if (d.children) {\n d.children = d.children.slice(0, 7);\n }\n });\n root.dx = 10;\n root.dy = width / (root.height + 1);\n return d3.tree().nodeSize([root.dx, root.dy])(root);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"width = 954","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}