Javascript d3js svg文本和形状在同一行上

我正在使用SVG在D3.js中绘制文本和形状，并希望绘制与文本内联的形状以及与文本尺寸相似的形状。我能想到的唯一方法是围绕每个tspan绘制一个矩形，然后在相对于tspan矩形的位置绘制形状。结果是：

这是一个矩形[]这是一个圆（）

其中，上面的括号表示SVG形状。当前代码如下

js:

}

html:

---

有什么办法吗？有没有比我正在跟踪的轨迹更简单的方法？

我尝试使用tspan.node（）.getComputedTextLength（）获取tspan维度，但我认为这返回了一个错误，因为在调用时没有呈现它。我只是使用text.node（）.getBBox（）来获取每个文本块的维度：

function renderSVGText(){
    var svgArea = d3.select("svg#svg_area_id");

    var group = svgArea.append("g")
        .attr("width", "100%")
        .attr("height", "100%")
        .style("stroke", "red")
        .style("fill", "none");

    var text = group.append("text")
        .attr("y", "0")
        .attr("font-size",52)
        .attr("dy", "1em")
        .attr("id", "text_id")
        .style('fill', 'black');

    var tspan1 = text.append('tspan')
        .attr("id", "tspan1_id")
    tspan1.text("This is a square");

    var boundingRect = svgArea.append("rect")
        .style("stroke", "pink")
        .style("fill", "none");

    var textSize = text.node().getBBox();
    boundingRect.attr("width", textSize.width)
        .attr("height", textSize.height);

    svgArea.append("rect")
        .attr("x", textSize.width+10)
        .attr("y", 0)
        .attr("height", textSize.height)
        .attr("width", textSize.height)
        .attr("id", "shape");

    var text2 = group.append("text")
        .attr("x", textSize.width+textSize.height+20)
        .attr("y", "0")
        .attr("font-size",52)
        .attr("dy", "1em")
        .attr("id", "text2_id")
        .style('fill', 'black');

    var tspan2 = text2.append('tspan')
    tspan2.text("and this is a triangle");
}

<div class="svg-container" id="chartId"></div>

.svg-container {
    display: inline-block;
    width: 512px;
    height: 512px;
    padding-top: 50px;
    padding-bottom: 100%; /* aspect ratio */
    vertical-align: top;
    overflow: hidden;
    border: 1px solid black;
}

function renderSVGText(){
    var svgArea = d3.select("svg#svg_area_id");

    var group = svgArea.append("g")
        .attr("width", "100%")
        .attr("height", "100%")
        .style("stroke", "red")
        .style("fill", "none");

    var text = group.append("text")
        .attr("y", "0")
        .attr("font-size",52)
        .attr("dy", "1em")
        .attr("id", "text_id")
        .style('fill', 'black');

    var tspan1 = text.append('tspan')
        .attr("id", "tspan1_id")
    tspan1.text("This is a square");

    var boundingRect = svgArea.append("rect")
        .style("stroke", "pink")
        .style("fill", "none");

    var textSize = text.node().getBBox();
    boundingRect.attr("width", textSize.width)
        .attr("height", textSize.height);

    svgArea.append("rect")
        .attr("x", textSize.width+10)
        .attr("y", 0)
        .attr("height", textSize.height)
        .attr("width", textSize.height)
        .attr("id", "shape");

    var text2 = group.append("text")
        .attr("x", textSize.width+textSize.height+20)
        .attr("y", "0")
        .attr("font-size",52)
        .attr("dy", "1em")
        .attr("id", "text2_id")
        .style('fill', 'black');

    var tspan2 = text2.append('tspan')
    tspan2.text("and this is a triangle");
}