javascript - d3js svg 文本和形状在同一行

Question

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

这是一个矩形[]这是一个圆()

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

js:

function setupSVG(){
    d3.select("div#chartId")
        .append("div")
        .classed("svg-container", true)  
        .append("svg")
        .attr("preserveAspectRatio", "xMinYMin meet")
        .attr("viewBox", "0 0 200 200")
        .attr("id", "svg_area_id")
}

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

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

    var group = svgArea.append("g")
        .attr("width", "100%")
        .attr("height", "100%")
        .style("stroke", "red") //I only want to draw rect stroke
        .style("fill", "none");

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

    var tspan1 = text.append('tspan')
    tspan1.text("This is a square");
    var tspan2 = text.append('tspan')
    tspan2.text("and this is a triangle");

    var boundingRect = group.append("rect")
    //see http://phrogz.net/SVG/tspan_bounding_box.xhtml
    var bbox = tspan1.getBoundingClientRect();
    var pt = svg.createSVGPoint();
    pt.x = bbox.left;
    pt.y = bbox.top;
    var pt2 = pt.matrixTransform(xform);
    rect.setAttribute('x',pt2.x);
    rect.setAttribute('y',pt2.y);

    pt.x = bbox.right;
    pt.y = bbox.bottom;
    pt = pt.matrixTransform(xform);
    boundingRect.attr('width', pt.x-pt2.x);
    boundingRect.attr('height',pt.y-pt2.y);

    /* this draws a rect around all text
    var textSize = text.node().getBBox();
    boundingRect.attr("width", textSize.width)
        .attr("height", textSize.height);
    */

html:

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

CSS:

.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;
}

关于如何做到这一点有什么想法吗？有比我正在关注的轨道更简单的方法吗？

Answer 1

我尝试使用 tspan.node().getComputedTextLength() 获取 tspan 维度，但这返回了一个错误，我推测是因为它在调用时没有被渲染。我只是使用 text.node().getBBox() 来获取每个文本 block 的尺寸:

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");
}