Расположите текстовый элемент слева от родительского 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)");

но все имена прыгают слишком далеко и больше не видны.

Вот как я этого хочу:

Как мне этого добиться?

Дайте мне знать, если вам нужна дополнительная информация.