D3JS SVG 文本和形状在同一行上

d3js svg text and shapes on same line

本文关键字：一行 文本 SVG D3JS      更新时间：2023-09-26

我正在使用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;
}

关于如何做到这一点的任何想法？有什么比我遵循的曲目更简单的方法吗？

我试图使用 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");
}
相关文章：