Question

当DOM中有一个SVG元素时，可以使用getBBox函数获取其边界框，如下例所示：

http://bl.ocks.org/mbostock/1160929

是否有可能在没有实际向DOM添加元素的情况下获取边界框？

换句话说，我可以计算一些文本的边界框如果它附加到某个节点而没有实际附加它？

目标是迭代地向图形添加标签，同时避免重叠文本。

Answer 1

在显示文本之前无法计算文本的高度。原因是他们可能会有很多影响文本高度的事情（css类，字体是否存在于计算机中......）。

实现它的最简单方法是创建隐藏文本，获取其高度然后计算位置。

Answer 2

怎么样

添加文字
获取Bounds
删除文字。

这样的事情：

//add the text
var text = svg.append("text")
    .attr("id", "text-to-remove")
    .attr("x", 480)
    .attr("y", 250)
    .attr("dy", ".35em")
    .attr("text-anchor", "middle")
    .style("font", "300 128px Helvetica Neue")
    .text("Hello, getBBox!");
//get bbox
var bbox = text.node().getBBox();

//remove the text

d3.select("#text-to-remove").remove();

//use bbox
var rect = svg.append("rect")
    .attr("x", bbox.x)
    .attr("y", bbox.y)
    .attr("width", bbox.width)
    .attr("height", bbox.height)
    .style("fill", "#ccc")
    .style("fill-opacity", ".3")
    .style("stroke", "#666")
    .style("stroke-width", "1.5px");

工作代码here

希望这有帮助！

抢占式getBBox计算

2 个答案: