SVG текстовите елементи не се показват на диаграмата

Опитвам се да създам кръгова диаграма динамично, като използвам обикновен ванилен JavaScript и SVG, и искам тя да има подсказки, които се показват, когато задържите курсора на мишката върху всеки кръгов срез, които са специфични за конкретния срез. Мога да го накарам да работи, ако вмъкна възел <title>, но не мога да персонализирам <title> с CSS, за да изглежда красиво.

И така, опитвам се да намеря заобиколно решение с помощта на SVG текст, но изглежда не мога да накарам текстовите полета да се покажат. Опитах се да поставя групата, която съдържа полето с подсказки и текст, както преди, така и след пътеките на парчетата, но не работи и в двата случая.

Когато отида в инспектора, виждам, че групата с подсказката се създава и се показва в задната част, но не мога да ги видя на изобразената страница. Може ли някой да ме насочи в правилната посока? Мисля, че може да има нещо общо с трансформацията за групата, но опитах различни настройки и това не го оправи. Не съм сигурен какво правя погрешно в този момент. Създадох CodePen с това, което имам досега на: https://codepen.io/tho1379/pen/MWjMKQV


javascript svg charts css
person user15071802    schedule 24.01.2021    source източник
comment
Мисля, че текстът е твърде голям. Проверете своята координатна система и размера на шрифта.   -  person Robert Longson    schedule 24.01.2021
comment
@RobertLongson Опитах се да променя размера на шрифта, но това не накара текстовите полета да се появят, за съжаление. Когато се опитах да коригирам полето за изглед, кръговата диаграма изчезна и аз видях част от текстовите полета, но без значение как коригирам трансформацията, полетата се отрязват. Освен това все още не мога да накарам кръговата диаграма и текстовите полета да се показват. Така че трябва да е наслояване, но съм объркан как да го поправя. :(   -  person user15071802    schedule 24.01.2021
comment
вашият viewBox е малък, вашата трансформация за подсказката е огромна, т.е. 200 пъти размера на viewBox.   -  person Robert Longson    schedule 24.01.2021
comment
@RobertLongson Мисля, че не разбирам как работи трансформацията. Промених размера на полето за изглед на 0 0 1000 1000 и кръговата диаграма вече се е свила до размера на точка. И сега мога да видя текстовите си полета (изглежда, че всички те са наслоени едно върху друго), но не разбирам как са 200 пъти по-големи от диаграмата? Мислех, че transform›translate е да измести текстовото поле настрани?   -  person user15071802    schedule 24.01.2021
comment
@RobertLongson Мисля, че разбрах! Тъй като полето за изглед е зададено на 2, нормалният размер на текста се увеличава непропорционално. И така, два нови въпроса: 1) Защо не мога да направя полето за изглед по-голямо, без да загубя изцяло диаграмата си (както споменах в предишния ми коментар, когато се опитам да направя полето за изглед 1000x1000, диаграмата става толкова малка, че дори не мога да видя то)? 2) Ако погледнете отново CodePen, жълтото текстово поле вече се показва за всички резени с изключение на ванилията -- защо се случва това?   -  person user15071802    schedule 24.01.2021
comment
1) Защото това прави viewBox. Вижте stackoverflow. com/questions/15335926/   -  person Robert Longson    schedule 24.01.2021

Отговори (1)


arrow_upward
0
arrow_downward

Атрибутът viewBox определя позицията и размерите в потребителското пространство на SVG прозорец за изглед. В случай на viewBox=-1 -1 2 2 ширината на порта за изглед е 2 потребителски единици и височината също е 2. Графиката започва от x=-1 и y=-1

Междувременно вашият текст има размер на шрифта: .9rem (вероятно 14,4 единици)

За да коригирам този проблем, отделих текста в различна група. Поставих piePaths в символ с viewBox=0 0 2 2, тъй като не искам символ с отрицателни координати, транслирам piePaths transform=translate(1,1)
Следващия съм използвайки символа: <use xlink:href="#pie" width="200" height="200"/> Това ще направи пая по-голям (200/200)

Сега можете да видите текста, но всичко е припокрито. Оставям на вас да преведете всяка подсказка там, където трябва да бъде.

Като наблюдение: безсмислено е да се използва z-index в svg. За да поставите фигура отгоре, нарисувайте тази фигура в края на документа

.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="/bg#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>

person enxaneta    schedule 24.01.2021
comment
Благодаря за това! Не съм запознат с xlink -- отивам да го потърся. :) - person user15071802; 25.01.2021