D3.js d3文本元素的读取宽度

我想在d3中创建的

元素创建后，读取它们的宽度

我试过了

svg.selectAll("text")
    .each(function () {
        console.log('text', d3.select(this).style("width"));
    }); // 'auto'

及

在选择方法（如attr）中提前感谢

：

在一个元素的选择中，您可以说

   selection.node().getComputedTextLength(). 

您还可以对宽度和高度使用getBBox，您可以使用：

var wh = {w:-1,h:-1};
Array.from(document.querySelectorAll('text')).map(function(ele) {
  var bbox = ele.getBoundingClientRect();
  wh = {
   w: (wh.w<bbox.width) ? bbox.width :wh.w,
   h: (wh.h<bbox.height) ? bbox.height :wh.h
  }
})

var-wh={w:-1，h:-1}；
Array.from（document.querySelectorAll（'text'））.map（function（ele）{
var bbox=ele.getBoundingClientRect（）；
wh={
w：（wh.w示例基于Rachel Gallen，使用2020年创建的、在Chrome上工作的
getComputedTextLength（）
函数

<svg xmlns="http://www.w3.org/2000/svg" version="2.0" width="800px" height="600px">
    <script type="text/javascript" href="https://d3js.org/d3.v5.min.js"></script>
    <script type="text/JavaScript">
        // select Tooltip <text> element by 'id' using d3 library
        var tooltip = d3.select("#tooltip-text");
        // change Tooltip text 
        var sTooltip = "tooltip string with more information";
        tooltip.node().innerHTML = sTooltip;

        // compute text length
        var iTextLength = tooltip.node().getComputedTextLength();
    </script>

    <rect id='tooltip-rect' x='20' y='20' width='100' height='25' fill="yellow"/>
    <text id='tooltip-text' x='0' y='0'>
        Tooltip: ?
    </text>
</svg>

：根目录{
--线条颜色：黑色；
--线宽：2；
}
直线、多段线、矩形、圆、路径{
笔划宽度：var（--线宽）；
笔划：var（--线颜色）；
}
#工具提示文本{
最大宽度：800px；
文本对齐：左对齐；
过渡：不透明度0.4s；
指针事件：无；
不透明度：0；
填充：4px；
字体系列：Arial；
字号:14 ;；
}
#工具提示矩形{
背景：黄色；
边框：纯灰；
最大宽度：800px；
过渡：不透明度0.4s；
指针事件：无；
不透明度：0；
}
svg{
利润率：10px 20px；
溢出：可见；
}

*
***
千瓦时
差异原则
Δ；300毫安
B
10A
B:E:clairage Etage+洞穴+大厅+厕所+卡吉比+
地下一层
大厅：埃斯卡利埃酒店
大厅：美食之门大酒店
兰普大厅酒店
B7
房间：门廊的插嘴
兰佩·钱布雷东部（穆森）
B8
打断者
洞穴通道中断器
车库门自动中断器
兰佩斯洞穴小车库
B12
兰佩·库卢瓦·塔吉·尤伊斯特（签名）
C
25A
C:triphasé美食
C1
连接方向
四西门子
C2
连接方向
西门子微型探空仪
迪菲伦蒂酒店
Δ；30毫安
E
16A
E:E:clairage et 2 Princes dans salle de bain principale
E1
迪森特酒庄酒店
兰佩萨勒德班酒店
E2
德森特酒庄集团
德森特酒庄集团
F
16A
F:Salle de bain ETAGE+prise TV+prise PC局
一层楼
普里斯电视沙龙
电视飞利浦
地上二层
非盟警察局
奥格图尔戴尔酒店
F3
萨勒·德·班恩：兰普·普拉芬德
F4
萨勒·德·贝恩：兰佩·梅布勒
F5
萨勒·德·贝恩：普里斯·辐射人
加加放射器
F6
萨勒·德·贝恩：企业集团
萨勒·德·贝恩：企业集团
G
16A
G:Salle de bain PRINCIPALE+集团机器公司
G1
列维集团
列维集团
G2
兰佩·梅布勒
G3
佩蒂车库集团
佩蒂车库集团
佩蒂车库集团
佩蒂车库集团
紫菜机
我
16A
I:chambreétage Ouest（签名）
I1
波尔特城堡酒店
I2
普瑞斯酒店
西门子散热器
I3
西边的小房间
田鼠
I4
维特罗克拉米克岛上cuisson广场上的高切式建筑群（bloc de Priceságauche de la paque de cuisson de vitrocéramique）
维特罗克拉米克岛上cuisson广场上的高切式建筑群（bloc de Priceságauche de la paque de cuisson de vitrocéramique）
维特罗克拉米克岛上cuisson广场上的高切式建筑群（bloc de Priceságauche de la paque de cuisson de vitrocéramique）
J
16A
J:Prises bloc de cuisson
J1
维特罗克拉米克铜牌集团
维特罗克拉米克铜牌集团
维特罗克拉米克铜牌集团
工具提示：？
这个答案有v4版本吗？我无法在节点中找到getBBox或getComputedTextLength。我必须使用v4中的
selection.nodes[0]
来获取节点。@vijayst以下是我所做的（使用v4）：
selection.node（）.getBBox（）.width
var wh = {w:-1,h:-1};
Array.from(document.querySelectorAll('text')).map(function(ele) {
  var bbox = ele.getBoundingClientRect();
  wh = {
   w: (wh.w<bbox.width) ? bbox.width :wh.w,
   h: (wh.h<bbox.height) ? bbox.height :wh.h
  }
})

<svg xmlns="http://www.w3.org/2000/svg" version="2.0" width="800px" height="600px">
    <script type="text/javascript" href="https://d3js.org/d3.v5.min.js"></script>
    <script type="text/JavaScript">
        // select Tooltip <text> element by 'id' using d3 library
        var tooltip = d3.select("#tooltip-text");
        // change Tooltip text 
        var sTooltip = "tooltip string with more information";
        tooltip.node().innerHTML = sTooltip;

        // compute text length
        var iTextLength = tooltip.node().getComputedTextLength();
    </script>

    <rect id='tooltip-rect' x='20' y='20' width='100' height='25' fill="yellow"/>
    <text id='tooltip-text' x='0' y='0'>
        Tooltip: ?
    </text>
</svg>