Javascript 如何在矩形中包含的文本的顶部/底部/左侧/右侧添加填充

如何在D3 rect组件中包含的文本的顶部/底部/左侧/右侧添加填充？我只能把它放在文本的左边，尽管我不确定这是否正确。我已经为此挣扎了几天，如果有人能帮我找到一个方法，那就太好了

下面是我到目前为止的示例代码->

函数换行（文本、宽度）{
text.each（函数（）{
变量文本=d3。选择（此），
words=text.text（）.split（/\s+/）.reverse（），
单词
行=[]，
行号=0，
线宽=1.1，//ems
y=text.attr（'y'），
dy=parseFloat（text.attr（'dy'）），
tspan=文本
.text（空）
.append（'tspan'）
.attr（'x'，10）
.attr（'y'，y）
.attr（'dy'，dy+'em'）；
while（（word=words.pop（））{
行。推（字）；
tspan.text（line.join（“”））；
if（tspan.node（）.getComputedTextLength（）>width）{
line.pop（）；
tspan.text（line.join（“”））；
行=[字]；
tspan=文本
.append（'tspan'）
.attr（'x'，10）
.attr（'y'，y）
.attr（'dy'，++lineNumber*lineHeight+dy+'em'）
.文本（字）；
}
}
});
}
var svg=d3
.选择（'正文'）
.append（'svg'）
.attr（'width'，500）
.attr（'高度'，5000）；
var长文本=
“现在是所有好人来帮助他们的国家的时候了现在是所有好人来帮助他们的国家的时候了现在是所有好人来帮助他们的国家的时候了现在是所有好人来帮助他们的国家的时候了”；
var totHeight=0；
drawRect（）；
函数drawRect（）{
var-someWidth=212；
var g=svg
.append（'g'）
.attr（'transform'，'translate（20'，+tothheight+'））；
var rect=g
.append（'rect'）
.style（'fill'、'steelblue'）
.attr（'width'，someWidth）
.attr（“高度”，1）；
var txt=g
.append（'文本'）
.text（长文本）
.attr（'x'，4）
.attr（'y'，10）
.attr（'dy'，'.71em'））
.style（'填充'，'白色'）
.呼叫（包裹，部分宽度）；
var height=txt.node（）.getBBox（）.height+25；
总高度+=高度+10；
矩形属性（“高度”，高度）；
}

首先，在

wrap

功能中，我建议您根据文本选择中使用的属性设置

x

属性：

x = text.attr('x')

之后，只需从

someWidth

中减去两个边距。例如，由于您使用的是14（10+4）：

以下是您的代码和这些更改：

函数换行（文本、宽度）{
text.each（函数（）{
变量文本=d3。选择（此），
words=text.text（）.split（/\s+/）.reverse（），
单词
行=[]，
行号=0，
线宽=1.1，//ems
y=text.attr（'y'），
x=text.attr（'x'）
dy=parseFloat（text.attr（'dy'）），
tspan=文本
.text（空）
.append（'tspan'）
.attr（'x'，x）
.attr（'y'，y）
.attr（'dy'，dy+'em'）；
while（（word=words.pop（））{
行。推（字）；
tspan.text（line.join（“”））；
if（tspan.node（）.getComputedTextLength（）>width）{
line.pop（）；
tspan.text（line.join（“”））；
行=[字]；
tspan=文本
.append（'tspan'）
.attr（'x'，x）
.attr（'y'，y）
.attr（'dy'，++lineNumber*lineHeight+dy+'em'）
.文本（字）；
}
}
});
}
var svg=d3
.选择（'正文'）
.append（'svg'）
.attr（'width'，500）
.attr（'高度'，5000）；
var长文本=
“现在是所有好人来帮助他们的国家的时候了现在是所有好人来帮助他们的国家的时候了现在是所有好人来帮助他们的国家的时候了现在是所有好人来帮助他们的国家的时候了”；
var totHeight=0；
drawRect（）；
函数drawRect（）{
//var someWidth=randomIntFromInterval（40300）；
var-someWidth=212；
var g=svg
.append（'g'）
.attr（'transform'，'translate（20'，+tothheight+'））；
var rect=g
.append（'rect'）
.style（'fill'、'steelblue'）
.attr（'width'，someWidth）
.attr（“高度”，1）；
var txt=g
.append（'文本'）
.text（长文本）
.attr（'x'，14）
.attr（'y'，10）
.attr（'dy'，'.71em'））
.style（'填充'，'白色'）
.呼叫（包裹，someWidth-28）；
var height=txt.node（）.getBBox（）.height+25；
总高度+=高度+10；
矩形属性（“高度”，高度）；
}

x = text.attr('x')

var txt = g.append('text')
    //etc...
    .attr('x', 14)
    .call(wrap, someWidth - 28);