javascript - SVG text elements not showing up on chart

Question

I am trying to create a pie chart dynamically using plain vanilla JavaScript and SVG, and I want it to have tooltips that show up when you hover over each pie slice that are specific to the particular slice. I can get it working if I insert a <title> node, but I can't customize <title> with CSS to make it look "pretty".

So, I'm trying to find a workaround using SVG text, but I can't seem to get the text boxes to show up. I've tried putting the group that contains the tooltip box and text both before and after the pie slice paths, but it doesn't work either way.

When I go the inspector, I can see that the group with the tooltip is being created and shows up in the backend, but I can't see them on the rendered page. Can anyone point me in the right direction? I think it might have something to do with the transform for the group, but I've tried different settings and it doesn't fix it. I'm not sure what I'm doing wrong at this point. I created a CodePen with what I have so far at: https://codepen.io/tho1379/pen/MWjMKQV

question from:https://stackoverflow.com/questions/65873480/svg-text-elements-not-showing-up-on-chart

Answer 1

The viewBox attribute defines the position and dimension, in user space, of an SVG viewport. In the case of viewBox="-1 -1 2 2" the width of the view port is 2 user units and the height is also 2. The graphic begins at x="-1" and y="-1"

Meanwhile your text has font-size: .9rem (probably 14.4 units)

To fix this problem I separated the text in a different group. I've puted the piePaths in a symbol with a viewBox="0 0 2 2", Since I don't want a symbol with negative coordinates I am trabslating the piePaths transform="translate(1,1)"
Next I'm using the symbol: <use xlink:href="#pie" width="200" height="200"/> This will make the pie bigger (200/200)

Now you can see the text but it's all overlapped. I'll leave it to you to translate each tool tip where you need it to be.

As an observation: it's pointless to use z-index in svg. In order to put a shape on top you draw that shape at the end of the document

.myPie {
  width: 90%;
  margin: 2rem auto;
}

/*
svg {
  width: 100%;
}
*/

/* testing
.piePath {
  visibility: hidden;
}
*/

.piePath .tooltip {
  /*z-index: 1000;
  visibility: hidden;*/
}


path {
  opacity: 0.6;
}


.piePath:hover .tooltip {
 visibility: visible;
}

.piePath:hover path {
  opacity: 1;
  cursor: pointer;
}

.tooltip text {
    fill: black;
    font-size: 0.9rem;
    font-family: sans-serif;
}
.tooltip rect {
    fill: Cornsilk;
    stroke: Gray;
}

<div class="myPie">
  <svg viewBox="0 0 200 200" style="transform: rotate(-90deg)">
    <symbol id="pie" viewBox="0 0 2 2">
      <g transform="translate(1,1)">
    <g class="piePath">
      <path d="M 1 0 A 1 1 0 0 1 0.4600650377311522 0.8878852184023752 L 0 0" fill="MediumPurple" id="1"></path>
      
    </g>
    <g class="piePath">
      <path d="M 0.4600650377311522 0.8878852184023752 A 1 1 0 0 1 -0.7757112907044198 -0.6310879443260528 L 0 0" fill="PaleVioletRed" id="2"></path>
      
    </g>
    <g class="piePath">
      <path d="M -0.7757112907044198 -0.6310879443260528 A 1 1 0 0 1 -0.5766803221148672 -0.816969893010442 L 0 0" fill="MediumSeaGreen" id="3"></path>

    </g>
    <g class="piePath">
      <path d="M -0.5766803221148672 -0.816969893010442 A 1 1 0 0 1 -0.06824241336467135 -0.9976687691905392 L 0 0" fill="SteelBlue" id="4"></path>
     
    </g>
    <g class="piePath">
      <path d="M -0.06824241336467135 -0.9976687691905392 A 1 1 0 0 1 1 -2.4492935982947064e-16 L 0 0" fill="Coral" id="5"></path>
      
    </g>
    </g>
    </symbol>
    
   <use xlink:href="#pie" width="200" height="200"/>
    
    <g id="text">
      <g class="tooltip" transform="translate(30,30) rotate(90)" opacity="0.9">
        <rect rx="5" width="100" height="25"></rect><text x="5" y="15">Vanilla</text>
      </g>
      <g class="tooltip" transform="translate(30,30) rotate(90)" opacity="0.9">
        <rect rx="5" width="100" height="25"></rect><text x="5" y="15">Chocolate</text>
      </g>
       <g class="tooltip" transform="translate(30,30) rotate(90)" opacity="0.9">
        <rect rx="5" width="100" height="25"></rect><text x="5" y="15">Pistachio</text>
      </g>
       <g class="tooltip" transform="translate(30,30) rotate(90)" opacity="0.9">
        <rect rx="5" width="100" height="25"></rect><text x="5" y="15">Strawberry</text>
      </g>
      <g class="tooltip" transform="translate(30,30) rotate(90)" opacity="0.9">
        <rect rx="5" width="100" height="25"></rect><text x="5" y="15">Maple Walnut</text>
      </g>
      
    </g>
  </svg>
</div>