Question

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

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

上面的括号代表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（）获取tspan维度.getComputedTextLength（）但是这会返回一个错误，我推测是因为它没有在调用时呈现。我只是使用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");
}

d3js svg同一行上的文本和形状

1 个答案: