d3js v5 How to make the path depend on the text size?

Question

Good afternoon, colleagues, I am using d3js version 5 and and faced such a problem, could you help me?(This is my first time using this d3js and I don't understand a bit) could you help me how to make the path depend on the length of the text?

if visually the problem looks like this https://i.stack.imgur.com/i8Uk3.png

whole code structure from another file i am sending data on setup(Node, treedata)

const treedata = {
          "name": "Top Level",
          "parent": "null",
          "children": [
              {
                "name": "Level 2: A",
                "parent": "Top Level",
                "children": [
                    {
                        "name": "Son of A 232432432",
                        "parent": "Level 2: A"
                    },
                    {
                        "name": "Daughter of A",
                        "parent": "Level 2: A"
                    },
                    {
                        "name": "Daughter of A",
                        "parent": "Level 2: A"
                    },
                    {
                        "name": "Daughter of A 2222",
                        "parent": "Level 2: A"
                    },
                    {
                        "name": "Daughter of A 111111",
                        "parent": "Level 2: A"
                    },
                    {
                        "name": "Daughter of A",
                        "parent": "Level 2: A"
                    },
                    {
                        "name": "Daughter of A",
                        "parent": "Level 2: A"
                    },
                    {
                        "name": "Daughter of A",
                        "parent": "Level 2: A"
                    }
                ]
            },
            {
                "name": "Level 2: B",
                "parent": "Top Level"
            }
        ]
    }
    function setup(container, treedata) {
            const style = {
                width: window.innerWidth / 2,
                height: window.innerHeight / 2,
                x0: Infinity,
                x1: -Infinity,
                margin: {
                  top: 50,
                  bottom: 50,
                  left: 50,
                  right: 50,
                }
              };

              const tree = d3Tree()
                .size([style.width, style.height])
                .separation(function (a, b) {
                  return (a.parent == b.parent ? 1 : 2) / a.depth;
                });

              const root = tree(d3Hierarchy(treedata));
              root.each(d => {
                d.y = d.depth * 180;
                if (d.x > style.x1) style.x1 = d.x;
                if (d.x < style.x0) style.x0 = d.x;
              });

              const zoom = d3Zoom()
                .scaleExtent([1, 40])
                .on("zoom", zoomed);

              const svg = d3Select(container).select("svg").call(zoom);
              const g = svg.append("g")
                .attr("font-size", 14)
                .attr("transform",
                  "translate(" + 0 + "," + style.margin.top + ")");

              const link = g.append("g")
                .attr("class", "lines")
                .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", linkVertical);

              const node = g.append("g")
                .attr("class", "line-text")
                .attr("stroke-linejoin", "round")
                .attr("stroke-width", 3)
                .selectAll("g")
                .data(root.descendants())
                .enter().append("g")
                .attr("class", d => "node" + (d.children ? " node-parent" : " node-child"))
                .join("g")
                .attr("transform", d => "translate(" + d.x + "," + d.y + ")");

              node.append("circle")
                .attr("fill", d => d.children ? "#555" : "#999")
                .attr("r", 4);

              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)

              function zoomed({transform}) {
                g.attr("transform", transform);
              }
              function linkVertical(d) {
                return `M${d.source.x},${d.source.y}C${(d.source.x + d.target.x) / 2},${d.target.y} ${(d.source.x + d.target.x) / 2},${d.source.y} ${d.target.x},${d.target.y}`;
              }
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

I want at least such indents to remain https://i.stack.imgur.com/52WA7.png