我在创建SVG图形中的节点元素时,包括一个矩形和一些文本。由于文本内容可能相差很大,因此我希望根据文本的宽度设置矩形的宽度。
以下是使用D3.js创建具有固定宽度和高度值的矩形:
var rects = nodeEnter.append("rect")
.attr("width", rectW)
.attr("height", rectH);
接下来是文本元素:
var nodeText = nodeEnter.append("text")
.attr("class", "node-text")
.attr("y", rectH / 2)
.attr("dy", ".35em")
.text(function (d) {
return d.data.name;
});
nodeText // The bounding box is valid not before the node addition happened actually.
.attr("x", function (d) {
return (rectW - this.getBBox().width) / 2;
});
如您所见,目前我将文本置于可用空间的中心。然后我尝试根据文本设置矩形的宽度,但我从未同时获得矩形元素和文本HTML元素(以获取getBBox())。以下是我的一次尝试:
rects.attr("width",
d => this.getBBox().width + 20
);
但是显然this
是错误的,因为它指的是rects
而不是文本。
这里的正确方法是什么?