D3文本元素的读取宽度

Question

D3文本元素的读取宽度

35

在使用d3创建<text>元素后，我想读取它们的宽度。

我已尝试过

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

和

svg.selectAll("text")
    .each(function () {
        console.log('text', $(this).css("width"));
    }); // '0px'

提前致谢

- Brett

3个回答

0

基于Rachel Gallen在2020年创建的getComputedTextLength()函数为例，该函数适用于Chrome浏览器。

<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>

使用这种技术，现在当我拖动鼠标到某个设备上时会出现工具提示。

document.addEventListener("DOMContentLoaded", function(event) { 

var tooltip = d3.select("#tooltip-text");
var toolrec = d3.select("#tooltip-rect");
var iTextLength = 0;

d3.select("svg").selectAll("use")
    .on("mouseover", function ()
  {
  var sTooltip = "";
  
        var e = this.nextElementSibling;
     if (e != null)
         {
      if (e.className.baseVal == "info")
          {
             sTooltip = e.innerHTML;
                }
            }
  
        if (sTooltip == "")
            {
            sTooltip = this.href.baseVal;
            }

        if (sTooltip == "")
            {
            sTooltip = "? Tooltip";
            }

        tooltip.node().innerHTML = sTooltip;
  iTextLength = tooltip.node().getComputedTextLength();
  tooltip.style("opacity", "1");
  toolrec.style("opacity", "1");
  })
    .on("mousemove", function ()
  {
        toolrec.attr("x", d3.select(this).attr("x") - 5);
        toolrec.attr("y", d3.select(this).attr("y") - 12);
        toolrec.attr("width", iTextLength + 10);
        tooltip.attr("x", d3.select(this).attr("x"));
        tooltip.attr("y", d3.select(this).attr("y"));
  })
    .on("mouseout", function ()
  {
        tooltip.style("opacity", "0");
        toolrec.style("opacity", "0");
  return true;
  });

});

:root {
    --line-color: black;
    --line-width: 2;
    }

line, polyline, rect, circle, path {
    stroke-width: var(--line-width);
    stroke: var(--line-color);
    }

#tooltip-text {
    max-width: 800px;
    text-align:left;
    transition: opacity 0.4s;
    pointer-events:none;
    opacity: 0;
    padding: 4px;
    font-family: Arial;
    font-size: 14;
 }
 
#tooltip-rect {
    background: yellow;
    border:solid gray;
    max-width: 800px;
    transition: opacity 0.4s;
    pointer-events:none;
    opacity: 0;
 }

svg {
    margin:10px 20px;
    overflow:visible; 
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" version="2.0" width="8000px" height="6000px">
  <defs>
    <g id="differentiel">
      <rect x="-5" y="0" width="40" height="40" style="opacity:0" />
      <g transform="rotate(-20,0,0)">
        <polyline points="0 0 0 40 5 40 5 35 0 35" fill="none" />
      </g>
    </g>
    <g id="disjoncteur" transform="rotate(-20,0,0)">
      <polyline points="0 0 0 40 5 40 5 35 0 35" fill="none" />
    </g>
    <g id="prise">
      <path d="m40,-20 a20,20 0 0,0 0,40 z" fill="white" style="stroke:white" />
      <line x1="0" y1="0" x2="20" y2="0" />
      <line x1="20" y1="-15" x2="20" y2="15" />
      <path d="m40,-20 a20,20 0 0,0 0,40" fill="none" />
      <line x1="40" y1="-20" x2="40" y2="-28" />
      <line x1="40" y1="20" x2="40" y2="28" />
    </g>
    <g id="connexion">
      <rect x="0" y="-10" width="20" height="20" fill="white" />
    </g>
    <g id="lampe">
      <circle cx="0" cy="0" r="15" stroke="none" style="opacity:0" />
      <line x1="-10" y1="-10" x2="10" y2="10" />
      <line x1="10" y1="-10" x2="-10" y2="10" />
    </g>
    <g id="interrupteur">
      <circle cx="10" cy="0" r="10" fill="white" />
      <g transform="rotate(-60 10 0)">
        <line x1="20" y1="0" x2="50" y2="0" />
      </g>
    </g>
    <g id="int-sans-fil">
      <rect x="0" y="-5" width="10" height="10" fill="white" />
    </g>
    <g id="int-wifi">
      <rect x="0" y="-5" width="10" height="10" fill="white" />
    </g>
    <g id="int-radio">
      <rect x="0" y="-5" width="10" height="10" fill="white" />
    </g>
    <g id="int-unipolaire">
      <circle cx="10" cy="0" r="10" fill="white" />
      <g transform="rotate(-60 10 0)">
        <line x1="20" y1="0" x2="50" y2="0" />
        <line x1="50" y1="0" x2="50" y2="5" />
      </g>
    </g>
    <g id="int-bipolaire">
      <circle cx="10" cy="0" r="10" fill="white" />
      <g transform="rotate(-60 10 0)">
        <line x1="20" y1="0" x2="50" y2="0" />
        <line x1="50" y1="0" x2="50" y2="5" />
        <line x1="45" y1="0" x2="45" y2="5" />
      </g>
    </g>
    <g id="int-va-et-vient">
      <circle cx="10" cy="0" r="10" fill="white" />
      <g transform="rotate(-60 10 0)">
        <line x1="20" y1="0" x2="50" y2="0" />
        <line x1="50" y1="0" x2="50" y2="5" />
        <line x1="0" y1="0" x2="-30" y2="0" />
        <line x1="-30" y1="0" x2="-30" y2="-5" />
      </g>
    </g>
    <g id="inverseur">
      <g transform="translate(w²²0 0)">
        <circle cx="10" cy="0" r="10" fill="white" />
        <g transform="rotate(-60 10 0)">
          <line x1="20" y1="0" x2="50" y2="0" />
          <line x1="50" y1="0" x2="50" y2="5" />
          <line x1="0" y1="0" x2="-30" y2="0" />
          <line x1="-30" y1="0" x2="-30" y2="-5" />
        </g>
        <g transform="rotate(60 10 0)">
          <line x1="20" y1="0" x2="50" y2="0" />
          <line x1="50" y1="0" x2="50" y2="-5" />
          <line x1="0" y1="0" x2="-30" y2="0" />
          <line x1="-30" y1="0" x2="-30" y2="5" />
        </g>
      </g>
    </g>
    <g id="machine-à-laver">
      <rect x="0" y="-20" width="40" height="40" fill="white" fill-opacity="0.0" />
      <circle cx="20" cy="0" r="12" stroke="blue" fill="none" />
      <circle cx="20" cy="0" r="5" stroke="blue" fill="red" />
    </g>
    <g id="séchoir">
      <rect x="0" y="-20" width="40" height="40" fill="white" fill-opacity="0.0" />
      <circle cx="15" cy="-8" r="5" fill="none" />
      <circle cx="25" cy="-8" r="5" fill="none" />
      <circle cx="20" cy="8" r="5" fill="black" />
    </g>
    <g id="chauffe-eau">
      <circle cx="20" cy="0" r="20" fill="white" fill-opacity="0.0" />
      <circle cx="20" cy="0" r="15" fill="cyan" />
      <path d="m5,0 l 5,-5 l 10,10 l 10,-10 l 5,5" fill="none" />
    </g>
    <g id="chauffe-eau-direct">
      <circle cx="20" cy="0" r="20" fill="cyan" />
      <path d="m0,0 l 5,-5 l 10,10 l 10,-10 l 10,10 l 5,-5" fill="none" />
    </g>
    <g id="télérupteur">
      <rect x="0" y="-10" width="40" height="20" fill="white" />
      <path d="m5,5 h10 v-10 m20,10 h-10 v-10" fill="none" />
    </g>
    <g id="télérupteur-radio">
      <rect x="0" y="-10" width="40" height="20" fill="none" />
      <path d="m5,5 h10 v-10 m20,10 h-10 v-10" fill="none" />
      <path d="M25,15 A5,5 0 0,1 15,15" fill="none" stroke-width="1" />
      <path d="M30,15 A10,10 0 0,1 10,15" fill="none" stroke-width="1" />
      <path d="M35,15 A15,15 0 0,1 5,15" fill="none" stroke-width="1" />
    </g>
    <g id="télérupteur-wifi">
      <rect x="0" y="-10" width="40" height="20" fill="none" />
      <path d="m5,5 h10 v-10 m20,10 h-10 v-10" fill="none" />
    </g>
    <g id="bouton-poussoir">
      <circle cx="10" cy="0" r="10" fill="none" />
      <circle cx="10" cy="0" r="5" fill="red" />
    </g>
    <g id="transformateur">
      <circle cx="10" cy="0" r="10" fill="none" />
      <circle cx="20" cy="0" r="10" fill="none" />
    </g>
    <g id="lave-vaisselle">
      <rect x="0" y="-20" width="40" height="40" fill="white" />
      <line x1="0" y1="-20" x2="40" y2="20" />
      <line x1="0" y1="20" x2="40" y2="-20" />
      <circle cx="20" cy="0" r="10" fill="white" />
    </g>
    <g id="plaque-cuisson">
      <rect x="0" y="-20" width="40" height="40" fill="white" />
      <circle cx="30" cy="-10" r="5" stroke="blue" fill="none" />
      <circle cx="30" cy="10" r="5" stroke="blue" fill="none" />
      <circle cx="10" cy="10" r="5" stroke="blue" fill="none" />
    </g>
    <g id="télévision">
      <rect x="0" y="-20" width="60" height="40" fill="white" />
      <rect x="5" y="-15" width="50" height="30" fill="none" />
      <line x1="30" y1="20" x2="30" y2="25" />
      <line x1="20" y1="25" x2="40" y2="25" />
    </g>
    <g id="ordinateur">
      <rect x="0" y="-20" width="40" height="30" fill="white" />
      <rect x="5" y="-15" width="30" height="20" fill="none" />
      <rect x="0" y="15" width="40" height="10" fill="none" />
      <line x1="20" y1="20" x2="35" y2="20" />
    </g>
    <g id="four-classique">
      <rect x="0" y="-20" width="40" height="40" fill="white" />
      <line x1="0" y1="-10" x2="40" y2="-10" />
      <circle cx="20" cy="5" r="5" fill="none" />
    </g>
    <g id="four-pyrolyse">
      <rect x="0" y="-20" width="40" height="40" fill="white" />
    </g>
    <g id="micro-onde">
      <rect x="0" y="-20" width="40" height="40" fill="white" fill-opacity="0.0" />
      <g transform="scale(0.2 0.2)">
        <path d="M20 -30 C 40 -80 , 80 -80 , 100 -30 S 160 30, 180 -30" stroke="black" fill="none" />
        <path d="M20   0 C 40 -50 , 80 -50 , 100   0 S 160 50, 180   0" stroke="black" fill="none" />
        <path d="M20  30 C 40 -20 , 80 -20 , 100  30 S 160 80, 180  30" stroke="black" fill="none" />
      </g>
    </g>
    <g id="frigo">
      <rect x="0" y="-20" width="40" height="40" fill="white" />
      <text x="20" y="6" dominant-baseline="middle" text-anchor="middle" font-size="24">*</text>
    </g>
    <g id="congélateur">
      <rect x="0" y="-20" width="40" height="40" fill="white" />
      <text x="20" y="4" dominant-baseline="middle" text-anchor="middle">***</text>
    </g>
    <g id="radiateur">
      <rect x="0" y="-15" width="60" height="30" fill-opacity="0.0" />
      <path d="m0,0 l5,0 l 5,-10 l 10,20 l 10,-20 l 10,20 l 10,-20 l 5,10 l5,0" fill="none" stroke="black" stroke-width="1" />
    </g>
    <g id="volet">
      <rect x="0" y="-20" width="40" height="40" fill-opacity="0.0" />
      <path d="M0,-15 h 40 M0,-10 h 40 M0,-5 h 40 M0,0 h 40 M0,5 h40" fill="none" stroke="black" stroke-width="1" />
    </g>
    <g id="spot">
      <path d="m10,-10 a10,10 0 0,0 0,20" fill="none" />
      <circle cx="10" cy="0" r="5" fill="yellow" />
      <g transform="rotate(-45,10,0)">
        <line x1="5" y1="0" x2="15" y2="0" stroke-width="1" />
        <line x1="10" y1="-5" x2="10" y2="5" stroke-width="1" />
      </g>
    </g>
    <g id="neon-simple">
      <line x1="0" y1="-5" x2="0" y2="5" stroke="black" />
      <line x1="40" y1="-5" x2="40" y2="5" stroke="black" />
      <rect x="0" y="-2" width="40" height="4" fill="yellow" stroke="black" stroke-width="1" />
    </g>
    <g id="neon-double">
      <line x1="0" y1="-7" x2="0" y2="7" stroke="black" />
      <line x1="40" y1="-7" x2="40" y2="7" stroke="black" />
      <rect x="0" y="-6" width="40" height="4" fill="yellow" stroke="black" stroke-width="1" />
      <rect x="0" y="2" width="40" height="4" fill="yellow" stroke="black" stroke-width="1" />
    </g>
    <g id="compteur">
      <rect x="0" y="-20" width="40" height="40" fill="none" />
      <line x1="0" y1="-10" x2="40" y2="-10" />
      <text x="20" y="5" dominant-baseline="middle" text-anchor="middle" font-family="Arial" font-size="16">kWh</text>
    </g>
  </defs>

<line x1='100' y1='50' x2='100' y2='90'/>
<text x ='110' y='70' fill='black' font-family='Arial' font-size='20'>Différenciel PRINCIPAL</text>
<text x ='110' y='100' fill='black' font-family='Arial' font-size='12'>&#x0394;300 mA</text>
<use href='#differentiel' x='100' y='90'/>
<line x1='100' y1='130' x2='100' y2='170'/>
<line x1='100' y1='170' x2='100' y2='210'/>
<text x ='110' y='190' fill='black' font-family='Arial' font-size='20'>B</text>
<text x ='110' y='220' fill='black' font-family='Arial' font-size='12'>10A</text>
<use href='#differentiel' x='100' y='210'/>
<desc class='info'>
B: éclairage Etage + Cave  + Hall + WC + cagibi +
</desc>
<line x1='100' y1='250' x2='100' y2='330'/>
<text x='90' y='334' fill='black' font-family='Arial' font-size='16' text-anchor='end'>B1</text>
<line x1='100' y1='330' x2='120' y2='330'/>
<use href='#int-va-et-vient' x='120' y='330'/>
<desc class='info'>
hall: interrupteur à droite des escaliers
</desc>
<use href='#int-va-et-vient' x='140' y='330'/>
<desc class='info'>
hall: interrupteur à gauche de la porte de la cuisine
</desc>
<line x1='160' y1='330' x2='200' y2='330'/>
<use href='#lampe' x='200' y='330'/>
<desc class='info'>
lampe Hall dans l'entrée
</desc>
<line x1='100' y1='330' x2='100' y2='410'/>
<text x='90' y='414' fill='black' font-family='Arial' font-size='16' text-anchor='end'>B7</text>
<line x1='100' y1='410' x2='120' y2='410'/>
<use href='#int-unipolaire' x='120' y='410'/>
<desc class='info'>
chambre Est: interrupteur à gauche de la porte
</desc>
<line x1='140' y1='410' x2='180' y2='410'/>
<use href='#lampe' x='180' y='410'/>
<desc class='info'>
lampe chambre Est (Musson)
</desc>
<line x1='100' y1='410' x2='100' y2='490'/>
<text x='90' y='494' fill='black' font-family='Arial' font-size='16' text-anchor='end'>B8</text>
<line x1='100' y1='490' x2='120' y2='490'/>
<use href='#int-va-et-vient' x='120' y='490'/>
<desc class='info'>
interrupteur à gauche de l'escalier
</desc>
<line x1='140' y1='490' x2='170' y2='490'/>
<use href='#inverseur' x='170' y='490'/>
<desc class='info'>
interrupteur à droite du passage entre caves
</desc>
<line x1='190' y1='490' x2='220' y2='490'/>
<use href='#int-va-et-vient' x='220' y='490'/>
<desc class='info'>
interrupteur à droite de la porte de garage
</desc>
<line x1='240' y1='490' x2='280' y2='490'/>
<use href='#lampe' x='280' y='490'/>
<desc class='info'>
lampes cave petit garage
</desc>
<line x1='100' y1='490' x2='100' y2='570'/>
<text x ='90' y='574' fill='black' font-family='Arial' font-size='16' text-anchor='end'>B12</text>
<line x1='100' y1='570' x2='120' y2='570'/>
<use href='#télérupteur-radio' x='120' y='570'/>
<use href='#int-radio' x='140' y='610'/>
<use href='#int-radio' x='160' y='610'/>
<use href='#int-radio' x='180' y='610'/>
<line x1='160' y1='570' x2='200' y2='570'/>
<use href='#lampe' x='200' y='570'/>
<desc class='info'>
lampe couloir étage Ouest (Signeulx)
</desc>
<line x1='100' y1='170' x2='350' y2='170'/>
<line x1='350' y1='170' x2='350' y2='210'/>
<text x ='360' y='190' fill='black' font-family='Arial' font-size='20'>C</text>
<text x ='360' y='220' fill='black' font-family='Arial' font-size='12'>25A</text>
<use href='#differentiel' x='350' y='210'/>
<desc class='info'>
C: triphasé cuisine
</desc>
<line x1='350' y1='250' x2='350' y2='330'/>
<text x ='340' y='334' fill='black' font-family='Arial' font-size='16' text-anchor='end'>C1</text>
<line x1='350' y1='330' x2='370' y2='330'/>
<use href='#connexion' x='370' y='330'/>
<desc class='info'>
connection directe
</desc>
<line x1='390' y1='330' x2='410' y2='330'/>
<line x1='410' y1='330' x2='430' y2='330'/>
<use href='#four-classique' x='430' y='330'/>
<desc class='info'>
four Siemens
</desc>
<line x1='350' y1='330' x2='350' y2='410'/>
<text x ='340' y='414' fill='black' font-family='Arial' font-size='16' text-anchor='end'>C2</text>
<line x1='350' y1='410' x2='370' y2='410'/>
<use href='#connexion' x='370' y='410'/>
<desc class='info'>
connection directe
</desc>
<line x1='390' y1='410' x2='410' y2='410'/>
<line x1='410' y1='410' x2='430' y2='410'/>
<use href='#micro-onde' x='430' y='410'/>
<desc class='info'>
micro-onde Siemens
</desc>
<line x1='350' y1='170' x2='530' y2='170'/>
<line x1='530' y1='170' x2='530' y2='210'/>
<text x ='540' y='190' fill='black' font-family='Arial' font-size='20'>Différentiel SECONDAIRE</text>
<text x ='540' y='220' fill='black' font-family='Arial' font-size='12'>&#x0394;30 mA</text>
<use href='#differentiel' x='530' y='210'/>
<line x1='530' y1='250' x2='530' y2='290'/>
<line x1='530' y1='290' x2='530' y2='330'/>
<text x ='540' y='310' fill='black' font-family='Arial' font-size='20'>E</text>
<text x ='540' y='340' fill='black' font-family='Arial' font-size='12'>16A</text>
<use href='#differentiel' x='530' y='330'/>
<desc class='info'>
E: éclairage et 2 prises dans salle de bain principale
</desc>
<line x1='530' y1='370' x2='530' y2='450'/>
<text x='520' y='454' fill='black' font-family='Arial' font-size='16' text-anchor='end'>E1</text>
<line x1='530' y1='450' x2='550' y2='450'/>
<use href='#int-unipolaire' x='550' y='450'/>
<desc class='info'>
interrupteur à gauche de la colonne de descente d'eau
</desc>
<line x1='570' y1='450' x2='610' y2='450'/>
<use href='#lampe' x='610' y='450'/>
<desc class='info'>
lampe salle de bain
</desc>
<line x1='530' y1='450' x2='530' y2='530'/>
<text x ='520' y='534' fill='black' font-family='Arial' font-size='16' text-anchor='end'>E2</text>
<use href='#prise' x='530' y='530'/>
<desc class='info'>
bloc prises à gauche de la colonne de descente d'eau
</desc>
<use href='#prise' x='550' y='530'/>
<desc class='info'>
bloc prises à gauche de la colonne de descente d'eau
</desc>
<line x1='530' y1='290' x2='680' y2='290'/>
<line x1='680' y1='290' x2='680' y2='330'/>
<text x ='690' y='310' fill='black' font-family='Arial' font-size='20'>F</text>
<text x ='690' y='340' fill='black' font-family='Arial' font-size='12'>16A</text>
<use href='#differentiel' x='680' y='330'/>
<desc class='info'>
F: Salle-de-bain ETAGE + prise TV + prise PC bureau
</desc>
<line x1='680' y1='370' x2='680' y2='450'/>
<text x ='670' y='454' fill='black' font-family='Arial' font-size='16' text-anchor='end'>F1</text>
<use href='#prise' x='680' y='450'/>
<desc class='info'>
prise TV au Salon
</desc>
<line x1='680' y1='450' x2='720' y2='450'/>
<line x1='720' y1='450' x2='740' y2='450'/>
<use href='#télévision' x='740' y='450'/>
<desc class='info'>
TV Philips
</desc>
<line x1='680' y1='450' x2='680' y2='530'/>
<text x ='670' y='534' fill='black' font-family='Arial' font-size='16' text-anchor='end'>F2</text>
<use href='#prise' x='680' y='530'/>
<desc class='info'>
prise PC au Bureau
</desc>
<line x1='680' y1='530' x2='720' y2='530'/>
<line x1='720' y1='530' x2='740' y2='530'/>
<use href='#ordinateur' x='740' y='530'/>
<desc class='info'>
ordinateur Dell
</desc>
<line x1='680' y1='530' x2='680' y2='610'/>
<text x ='670' y='614' fill='black' font-family='Arial' font-size='16' text-anchor='end'>F3</text>
<line x1='680' y1='610' x2='700' y2='610'/>
<use href='#télérupteur-radio' x='700' y='610'/>
<use href='#int-radio' x='720' y='650'/>
<line x1='740' y1='610' x2='780' y2='610'/>
<use href='#lampe' x='780' y='610'/>
<desc class='info'>
Salle-de-bain: lampe plafond
</desc>
<line x1='680' y1='610' x2='680' y2='690'/>
<text x ='670' y='694' fill='black' font-family='Arial' font-size='16' text-anchor='end'>F4</text>
<use href='#prise' x='680' y='690'/>
<desc class='info'>
Salle-de-bain: lampe meuble
</desc>
<line x1='680' y1='690' x2='680' y2='770'/>
<text x ='670' y='774' fill='black' font-family='Arial' font-size='16' text-anchor='end'>F5</text>
<use href='#prise' x='680' y='770'/>
<desc class='info'>
Salle-de-bain: prise radiateur
</desc>
<line x1='680' y1='770' x2='720' y2='770'/>
<line x1='720' y1='770' x2='740' y2='770'/>
<use href='#radiateur' x='740' y='770'/>
<desc class='info'>
radiateur Jaga
</desc>
<line x1='680' y1='770' x2='680' y2='850'/>
<text x ='670' y='854' fill='black' font-family='Arial' font-size='16' text-anchor='end'>F6</text>
<use href='#prise' x='680' y='850'/>
<desc class='info'>
Salle-de-bain: bloc de prises sous le meuble
</desc>
<use href='#prise' x='700' y='850'/>
<desc class='info'>
Salle-de-bain: bloc de prises sous le meuble
</desc>
<line x1='680' y1='290' x2='860' y2='290'/>
<line x1='860' y1='290' x2='860' y2='330'/>
<text x ='870' y='310' fill='black' font-family='Arial' font-size='20'>G</text>
<text x ='870' y='340' fill='black' font-family='Arial' font-size='12'>16A</text>
<use href='#differentiel' x='860' y='330'/>
<desc class='info'>
G: Salle-de-bain PRINCIPALE + Bloc machines à laver
</desc>
<line x1='860' y1='370' x2='860' y2='450'/>
<text x ='850' y='454' fill='black' font-family='Arial' font-size='16' text-anchor='end'>G1</text>
<use href='#prise' x='860' y='450'/>
<desc class='info'>
bloc de prises à l'évier
</desc>
<use href='#prise' x='880' y='450'/>
<desc class='info'>
bloc de prises à l'évier
</desc>
<line x1='860' y1='450' x2='860' y2='530'/>
<text x ='850' y='534' fill='black' font-family='Arial' font-size='16' text-anchor='end'>G2</text>
<use href='#prise' x='860' y='530'/>
<desc class='info'>
lampe meuble
</desc>
<line x1='860' y1='530' x2='860' y2='610'/>
<text x ='850' y='614' fill='black' font-family='Arial' font-size='16' text-anchor='end'>G3</text>
<use href='#prise' x='860' y='610'/>
<desc class='info'>
bloc de prises au petit garage à gauche de l'évier
</desc>
<use href='#prise' x='880' y='610'/>
<desc class='info'>
bloc de prises au petit garage à gauche de l'évier
</desc>
<use href='#prise' x='900' y='610'/>
<desc class='info'>
bloc de prises au petit garage à gauche de l'évier
</desc>
<use href='#prise' x='920' y='610'/>
<desc class='info'>
bloc de prises au petit garage à gauche de l'évier
</desc>
<line x1='920' y1='610' x2='960' y2='610'/>
<line x1='960' y1='610' x2='980' y2='610'/>
<use href='#machine-à-laver' x='980' y='610'/>
<desc class='info'>
machine à laver
</desc>
<line x1='530' y1='170' x2='1080' y2='170'/>
<line x1='1080' y1='170' x2='1080' y2='210'/>
<text x ='1090' y='190' fill='black' font-family='Arial' font-size='20'>I</text>
<text x ='1090' y='220' fill='black' font-family='Arial' font-size='12'>16A</text>
<use href='#differentiel' x='1080' y='210'/>
<desc class='info'>
I: chambre étage Ouest (Signeulx)
</desc>
<line x1='1080' y1='250' x2='1080' y2='330'/>
<text x ='1070' y='334' fill='black' font-family='Arial' font-size='16' text-anchor='end'>I1</text>
<use href='#prise' x='1080' y='330'/>
<desc class='info'>
prise à gauche de la porte
</desc>
<line x1='1080' y1='330' x2='1080' y2='410'/>
<text x ='1070' y='414' fill='black' font-family='Arial' font-size='16' text-anchor='end'>I2</text>
<use href='#prise' x='1080' y='410'/>
<desc class='info'>
prise radiateur en dessous de la fenêtre
</desc>
<line x1='1080' y1='410' x2='1120' y2='410'/>
<line x1='1120' y1='410' x2='1140' y2='410'/>
<use href='#radiateur' x='1140' y='410'/>
<desc class='info'>
radiateur Siemens
</desc>
<line x1='1080' y1='410' x2='1080' y2='490'/>
<text x ='1070' y='494' fill='black' font-family='Arial' font-size='16' text-anchor='end'>I3</text>
<line x1='1080' y1='490' x2='1100' y2='490'/>
<use href='#connexion' x='1100' y='490'/>
<desc class='info'>
volet chambre étage Ouest
</desc>
<line x1='1120' y1='490' x2='1140' y2='490'/>
<line x1='1140' y1='490' x2='1160' y2='490'/>
<use href='#volet' x='1160' y='490'/>
<desc class='info'>
volet
</desc>
<line x1='1080' y1='490' x2='1080' y2='570'/>
<text x ='1070' y='574' fill='black' font-family='Arial' font-size='16' text-anchor='end'>I4</text>
<use href='#prise' x='1080' y='570'/>
<desc class='info'>
bloc de prises à gauche de la paque de cuisson en vitrocéramique
</desc>
<use href='#prise' x='1100' y='570'/>
<desc class='info'>
bloc de prises à gauche de la paque de cuisson en vitrocéramique
</desc>
<use href='#prise' x='1120' y='570'/>
<desc class='info'>
bloc de prises à gauche de la paque de cuisson en vitrocéramique
</desc>
<line x1='1080' y1='170' x2='1260' y2='170'/>
<line x1='1260' y1='170' x2='1260' y2='210'/>
<text x ='1270' y='190' fill='black' font-family='Arial' font-size='20'>J</text>
<text x ='1270' y='220' fill='black' font-family='Arial' font-size='12'>16A</text>
<use href='#differentiel' x='1260' y='210'/>
<desc class='info'>
J: Prises bloc de cuisson
</desc>
<line x1='1260' y1='250' x2='1260' y2='330'/>
<text x ='1250' y='334' fill='black' font-family='Arial' font-size='16' text-anchor='end'>J1</text>
<use href='#prise' x='1260' y='330'/>
<desc class='info'>
bloc de prises à droite de la plaque de cuisson en vitrocéramique
</desc>
<use href='#prise' x='1280' y='330'/>
<desc class='info'>
bloc de prises à droite de la plaque de cuisson en vitrocéramique
</desc>
<use href='#prise' x='1300' y='330'/>
<desc class='info'>
bloc de prises à droite de la plaque de cuisson en vitrocéramique
</desc>
<rect id='tooltip-rect' x='20' y='20' width='100' height='25' fill="yellow"/>
<text id='tooltip-text' x='20' y='20' dominant-baseline="middle" text-anchor="start">
Tooltip: ?
</text>
</svg>

- schlebe

0

您可以使用：

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
  }
})

执行完此操作后，wh.w 将包含任何文本的最大宽度，wh.h 将包含任何文本的最大高度。然后，您应该输入更精确的 CSS 选择器以满足您的需求。

- Netsi1964

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rachel Gallen · Accepted Answer

59

在选择方法中（例如attr）：

   this.getComputedTextLength().

在只选择一个元素的情况下，您可以这样说

   selection.node().getComputedTextLength().

您还可以使用 getBBox 获取宽度和高度

- Rachel Gallen

这个答案有v4版本吗？我在节点中找不到getBBox或getComputedTextLength。而且我必须使用selection.nodes[0]来获取节点的v4版本。 - vijayst

@vijayst 这是我所做的（适用于V4）： selection.node().getBBox().width - TheAddonDepot

1

请注意，this 在 function() 中可以正常工作，但在箭头函数 () => 中会失败。在后一种情况下，您可以使用 (d, i, n) => n[i] 访问节点，如此处所述。另请参见d3-selection问题97。 - djvg