为什么我不能得到这个d3.js文本的边界框？

Question

我有以下代码使用d3.js成功地将我的文本绘制到SVG上:

var myRect = svgContainer.append("text")
    .attr("x", 10)
    .attr("y", 20)
    .text("Lorem Ipsum")
    .attr("font-weight", "bold")
    .attr("fill", "white");

现在我想获得该文本的边界框.我该怎么做？？我尝试了以下方法:

console.log("getBBox = ", myRect.getBBox());

但它给了我这个错误:

Uncaught TypeError: myRect.getBBox is not a function

Answer 1

myRect是d3选择而不是html元素.

试试这段代码:

myRect.node().getBBox();

var svgContainer = d3.select("svg");  

var myRect = svgContainer.append("text")
                .attr("x", 10)
                .attr("y", 20)
                .text("Lorem Ipsum")
                .attr("font-weight", "bold")
                .attr("fill", "white");

console.log("getBBox = ", myRect.node().getBBox());

svg{
  background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="500" height="800"></svg>