read width of d3 text element - d3.js

Question

I would like to read the width of <text> elements, created in d3, after they're created.
I have tried
svg.selectAll("text")
.each(function () {
console.log('text', d3.select(this).style("width"));
}); // 'auto'
and
svg.selectAll("text")
.each(function () {
console.log('text', $(this).css("width"));
}); // '0px'
Thanks in advance

Answer 1

In a selection method (such as attr) :
this.getComputedTextLength().
In a selection of one element, you can say
selection.node().getComputedTextLength().
You can also use getBBox for the width and height

Answer 2

You may use:
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
}
})
After this wh.w will contain largest width and wh.h will contain largest height of any text. You should then enter a more precise CSS selector to match your needs.

Answer 3

Example based on Rachel Gallen using getComputedTextLength() function created in 2020 and that works on 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>
Using this technic, I have now tooltip when dragging mouse over some device.
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'>Δ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'>Δ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>