Question

我有一些文字，我使用append('text')附加到带有D3.js的svg对象。

我的代码如下所示：

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');

我想要的是将文本“放在”矩形内部，根据我追加的文本长度改变大小。 rect将有一个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添加到容器中那些尺寸。如果你想获得一点点发烧友，你可以添加另一个参数，允许你指定填充，以便文本和边框不会紧挨着彼此。

完整演示here。

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

1 个答案: