更改rect的大小以适合文本内部

Question

我有一些文本,我附加到使用D3.js的svg对象append('text').

我的代码看起来像这样:

var countries = svg.append("svg:g")
        .attr("id", "countries");

var stateTexts = svg.append('rect')
            .attr('x', xstateText)
            .attr('y', ystateText)
            .attr('width', 'auto')
            .attr('height', 'auto')

var stateText = svg.append('text')  
            .attr('x', xstateText)
            .attr('y', ystateText)  
            .style("font-family", "Arial")
            .style("font-size", "14px")
            .style("font-weight", 'bold');

我想要的是将文本"放在"矩形内部,根据我追加的文本长度改变大小.该矩形将有一个stroke的1px,从而给一个盒子的外观.

我怎么能做到这一点？显然,宽度和高度不能设置为auto(css属性).我需要其他可以原生于D3的东西.

编辑:被downvote困惑..

Answer 1

您无法在SVG中自动执行此操作 - 必须计算文本的尺寸并相应地添加矩形.幸运的是,这并不太难.该功能说明了基本思想:

function mkBox(g, text) {
  var dim = text.node().getBBox();
  g.insert("rect", "text")
    .attr("x", dim.x)
    .attr("y", dim.y)
    .attr("width", dim.width)
    .attr("height", dim.height);
}

给定一个容器和text元素,计算的尺寸text元素(文字必须为此设置才能正常工作),增加rect与这些尺寸的容器.如果你想获得一点点发烧友,你可以添加另一个参数,允许你指定填充,以便文本和边框不会紧挨着彼此.

在这里完成演示.