Javascript 如何根据foreignObject动态调整D3 rect的大小'；s高度

如何根据外来对象的高度动态调整D3矩形的大小。我不知道如何掌握这个外国物体的高度。我尝试了很多方法，但似乎都不管用。在过去的几天里，我一直在努力解决这个问题。如果有人能帮我，那就太好了

函数换行（文本、宽度）{
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长文本=
//“嗨”；
var longText='hello[×；10-15 ss-1]hello[×；10-15 ss-1]hello[×；10-15 ss-1]hello[×；10-15 ss-1]hello[×；10-15 ss-1]；
var totHeight=0；
drawRect（）；
函数drawRect（）{
//var someWidth=randomIntFromInterval（40300）；
var-someWidth=212；
var g=svg
.append（'g'）
.attr（'class'，'foreignObjwrapper'）
.attr（'transform'，'translate（20'，+tothheight+'））；
var rect=g
.append（'rect'）
.style（'fill'、'steelblue'）
.attr（'x'，50）
.attr（'y'，50）
.attr（'width'，someWidth）
.attr（'height'，100）；
常量文本=g
.append（'foreignObject'）
.attr（'width'，200）
.attr（'height'，200）
.attr（'id'，'textBox'）
.attr（'x'，50）
.attr（'y'，60）
.attr（'id'，'textBox'）
.style（'填充'，'黑色'）
.append（'xhtml:body'）
.html（长文本）；
//var img=g.append（'svg:image'）
//.attr（'x'，250）
//.attr（'y'，40）
//.attr（'width'，24）
//.attr（'height'，24）
//艾特先生(
//'xlink:href'，
//“./img/edit-24-px.svg”
//   );
text.on（'click'，函数（）{
var newText='bye[×；10-15 ss-1]；
//d3.追加（'text'）.html（“再见”）；
html（newText）；
console.log（'hi'，newText）；
//document.getElementsByClassName（“textBox”）.innerHTML=newText；
});
//var height=text.node（）.getBBox（）.height+25；
//总高度+=高度+10；
//矩形属性（“高度”，高度）；
}

---

您可以只给

主体

一个背景：

函数换行（文本、宽度）{
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长文本=
//“嗨”；
var longText='hello[×；10-15 ss-1]hello[×；10-15 ss-1]hello[×；10-15 ss-1]hello[×；10-15 ss-1]hello[×；10-15 ss-1]；
var totHeight=0；
drawRect（）；
函数drawRect（）{
//var someWidth=randomIntFromInterval（40300）；
var-someWidth=212；
var g=svg
.append（'g'）
.attr（'class'，'foreignObjwrapper'）
.attr（'transform'，'translate（20'，+tothheight+'））；
常量文本=g
.append（'foreignObject'）
.attr（'width'，200）
.attr（'height'，200）
.attr（'id'，'textBox'）
.attr（'x'，50）
.attr（'y'，60）
.append（'xhtml:body'）
.style（“背景”、“钢蓝”）
.样式（“边框”、“黑色虚线1px”）
.html（长文本）；
//var img=g.append（'svg:image'）
//.attr（'x'，250）
//.attr（'y'，40）
//.attr（'width'，24）
//.attr（'height'，24）
//艾特先生(
//'xlink:href'，
//“./img/edit-24-px.svg”
//   );
text.on（'单击'，函数（））{
var newText='bye[×；10-15 ss-1]；
//d3.追加（'text'）.html（“再见”）；
html（newText）；
console.log（'hi'，newText）；
//document.getElementsByClassName（“textBox”）.innerHTML=newText；
});
//var height=text.node（）.getBBox（）.height+25；
//总高度+=高度+10；
//矩形属性（“高度”，高度）；
}

您能更详细地解释一下您想要什么吗？你在这里设置了

foreignObject

的宽度和高度，我们是否应该忽略这一点，例如？因此基本上我有一个D3 rect，并在此基础上添加文本（以foreignObject的形式）。我希望动态增加rect的高度，以容纳foreignObject的所有内容（在本例中为text）。如果运行代码段，您将看到