Javascript 围绕文本绘制适当大小的矩形

当用户将鼠标悬停在饼图上时，我试图在悬停上绘制一个弹出工具提示。下面的方法可行，但问题是矩形的大小是固定的。如何使矩形适合实际文本的大小

    // Draw rectangle
    popup
        .append("rect")
        .attr("x", x + 5)
        .attr("y", y - 5)
        .attr("width", width)
        .attr("height", height)
        .attr("rx", 5)
        .attr("ry", 5)
        .style("fill", popupFillColor)
        .style("stroke", stroke)
        .style("stroke-width", 2);

    // add text
    popup
        .append("text")
        .attr("x", x + 10)
        .attr("y", y + 10)
        .text(e.seriesValue[0] + `: ${e.pValue} (${percent})`)
        .style("font-family", "sans-serif")
        .style("font-size", 14)
        .style("fill", stroke);

---

使用getBBox

常数x=50，y=30；
const svg=d3.select（'svg'）；
const rect=d3.select（'svg'）
.append（'rect'）
.style（'填充'，'无'）
.风格（“笔划”、“黑色”）；
const text=svg.append（'text'）
.text（'这是我的文本'）
.attr（'x'，x）
.attr（'y'，y）
const-box=text.node（）.getBBox（）；
控制台日志（框）
常数X_边距=20；
常数Y_裕度=10；
直肠
.attr（'x'，box.x-x_边距）
.attr（'y'，box.y-y_边距）
.attr（'width'，box.width+X_边距*2）
.attr（'height'，box.height+Y_边距*2）

---

sweeeeet！非常感谢！！