Javascript 获取父对象的子对象以查找父对象的子对象文本宽度

我需要得到文本的宽度，以便计算用作背景的矩形的宽度。我不知道如何遍历到父节点组，然后得到子节点的文本宽度，希望能得到一些帮助。下面是伪代码

用于尝试获取宽度的代码无效

错误如下： this.parentNode.select不是函数

以下是节点组的基本结构：

---

您可能希望使用bbox方法来实现这一点，如评论中所建议的

parentNode返回DOM元素，而不是D3选择，因此

this.parentNode.select('text')

不起作用，您需要使用：

d3.select(this.parentNode)

然后，您可以选择文本元素，并从DOM元素本身而不是d3选择中获取其bbox：

d3.select(this.parentNode).select(text).node().getBBox();

然后，您可以通过bbox.width获得宽度。当然，您不需要在中间步骤中使用d3选项，但在您沿着这条路径开始时，我将在下面的第一个片段中继续使用它：

var data=[短字符串，长字符串]； var svg=d3.selectbody .svg； var g=svg.selectAllg .数据 进来 .附录 .attrtransform，函数d，i{ 返回translate+[20，i*20+20]+； }; g、 附属物 .身高20 .attrill，黄色； g、 附录文本 .textfunctiond{return d；} .attry，18岁； g、 selectAllrect .宽度、功能{ 让parentSelection=d3.selectthis.parentNode 让bbox=parentSelection.selecttext.node.getBBox； 让宽度=bbox.width； 返回宽度； }

---

获取文本的绑定框是否更容易：或者@RyanMorton很乐意使用绑定框，但我不知道如何迭代每个父对象的文本来计算它。当我尝试使用getBBox以及this.parentNode.select时出错。语法不正确。回答很好，一如既往。。。但是，您不需要获取元素，选择它并再次获取元素，只需一步即可完成：返回this.parentNode.children[1].getBBox.width；。看这里：也许我可以加粗第二部分？还是我遗漏了什么？哈哈哈，对不起！我没读过！是的，创建一个像解决方案2这样的粗体标题可以帮助像我这样的盲人。公平地说，我将隐藏第一个片段，并稍微格式化后半部分的可见性。很好，再次抱歉。另一方面，这就是为什么我通常在代码段中默认选择隐藏代码段，当代码太大时，人们有时不会像我在这里所做的那样向下滚动到最后。。。

d3.select(this.parentNode)

d3.select(this.parentNode).select(text).node().getBBox();