将文字元素放置在父级SVG的左侧

Question

在我的SVG元素内是一个g元素，其中包含几个rect，circle和text节点。

<svg id="familyTreeSvg" xmlns="http://www.w3.org/2000/svg">
    <g id="familyTreeSvgG" transform="translate(-3640.998879446216,-3805.319191946216) scale(1)">
        <rect class="lifeline" x="3999.329665532318" y="3911.819191946216" width="441.67051879637665" height="20"
              rx="10"
              ry="10" id="lifelineRectSamanthaBishopI10" style="fill: red; opacity: 1;"></rect>
        <rect class="lifeline" x="3981.819191946216" y="3986.819191946216" width="459.1809923824785" height="40" rx="10"
              ry="10" id="lifelineRectOliverLionI1" style="fill: rgb(255, 255, 255); opacity: 1;"></rect>

        <g class="name">
            <text x="4006.819191946216" y="4011.819191946216" style="fill-opacity: 1;">Oliver Lion</text>
        </g>
        <g class="name">
            <text x="4024.329665532318" y="3926.819191946216" style="fill-opacity: 1;">Samantha Bishop</text>
        </g>

        <g class="node M" id="rootNode" transform="translate(3991.819191946216,4006.819191946216)">
            <circle class="node" r="20" style="fill: rgb(255, 255, 255);"></circle>
        </g>
        <g class="node F" id="SamanthaBishopI10" transform="translate(4009.32958984375, 3921.819091796875)">
            <circle class="node" r="13" style="fill: rgb(255, 255, 255);"></circle>
        </g>
    </g>
</svg>

我使用D3js缩放并拖动g元素。 当名称（text-元素）将translate放在左侧之外时，我希望它贴在左侧而不是平移到左侧，以便该名称仍然可见。

我当前的尝试是：

function movePersonNames(person, lifeLine) { 
    let boundingBox = lifeLine.getBoundingClientRect();
    let lifeLineWidth = boundingBox.width;
    let lifeLineCoordinate =  boundingBox.x;
    let lifeLineVisible = lifeLineWidth + lifeLineCoordinate;
    if (lifeLineCoordinate < 0 && lifeLineVisible > 0) {
        let moveText = "translate(" + lifeLineCoordinate * -1 + ",0)";
        d3.select(person).attr("transform", moveText);
    }
}

但是，有些名称仍然部分不可见，而另一些名称距离太远：

如果比例尺不为1则更糟。

我还尝试使用倒置的d3.event.transform.x：

    d3.select(person).attr("transform", "translate(" + d3.event.transform.x * -1 + ",0)");

但是所有的名字都跳得太远了，不再可见。

这就是我想要的：

我该如何实现？

如果您需要更多信息，请告诉我。