Tooltip zu SVG-Elementen mit Text aus einem Array hinzufügen

Question

Ich habe mehrere SVG-Kreise und möchte, dass jeder einzelne Text in einem Tooltip bei Hover angezeigt wird.

Ich werde meine SVG-Elemente in Adobe Illustrator erstellen, also brauche ich eine Möglichkeit, Text für den Tooltip an die IDs der SVGs zu binden.

Nachstehend habe ich versucht, dies zu tun, indem ich ein Array mit dem Objekt "color: white" erstellt habe, das dem Namen des SVG-Kreises entspricht. Id = "# white" Wie kann ich diese Daten an meinen Tooltip binden?

var tooltipText = [ 
 
    {"color":"white", "text":"About white"}, 
 
    {"color":"black", "text":"About black"} 
 
] 
 
     
 
var tooltip = d3.select('.tooltip').text(function(d) {return tooltipText}) 
 
     
 
d3.select('#white') 
 
    .on("mouseover", function(){ 
 
    return tooltip.style("visibility", "visible"); 
 
    }) 
 
    .on("mousemove", function(){ 
 
    return tooltip 
 
    .style("top",(d3.event.pageY+10)+"px") 
 
    .style("left",(d3.event.pageX+10)+"px"); 
 
    }) 
 
    .on("mouseout", function(){ 
 
    return tooltip.style("visibility", "hidden"); 
 
    }); 
 
    

 .container { 
 
     position: relative; 
 
     } 
 
    
 
     .tooltip { 
 
     font-family: Arial; 
 
     font-size: 10px; 
 
     padding: 10px; 
 
     width: 100px; 
 
     height: 150px; 
 
     border: 1px solid black; 
 
     position: absolute; 
 
     top: 0; 
 
     left: 200px; 
 
     visibility: hidden; 
 
     background: white; 
 
     } 
 
     
 
     #white { 
 
     fill: white; 
 
     stroke: black; 
 
     stroke-width: 2px 
 
     } 
 
     
 
     #black { 
 
     fill: black 
 
     } 
 
     
 
     circle:hover { 
 
     stroke: green; !important 
 
     fill: orange; 
 
     stroke-width: 2px 
 
     } 
 
    

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 

 
<div class="container"> 
 
    <svg> 
 
    <g id="selection"> 
 
\t <circle id="white" class="st0" cx="49.2" cy="49.2" r="48.7"/> 
 
\t <circle id="black" class="st1" cx="128.4" cy="49.2" r="48.7"/> 
 
    </g> 
 
    </svg> 
 
</div> 
 

 
<div class="tooltip"></div>

Answer 1

Zunächst holen wir die Id des Kreises mit dieser Linie in Ihrem mousemove:

var thisId = d3.select(this).attr("id"); 

Dann wir eine Schleife durch das Array und den entsprechenden Wert erhalten:

var index; 
for(var i = 0; i < tooltipText.length; i++){ 
    if(tooltipText[i].color == thisId){ 
     index= i 
    } 
}; 
tooltip.html(tooltipText[index].text)  

Hier ist Ihr aktualisierter Ausschnitt:

var tooltipText = [ 
 
{"color":"white", "text":"About white"}, 
 
{"color":"black", "text":"About black"} 
 
] 
 
     
 
var tooltip = d3.select('.tooltip').text(function(d) {return tooltipText}) 
 
     
 
d3.selectAll("circle") 
 
    .on("mousemove", function(d){ 
 
    var thisId = d3.select(this).attr("id"); 
 
    var index; 
 
    for(var i = 0; i < tooltipText.length; i++){ 
 
     if(tooltipText[i].color == thisId){ index= i} 
 
    }; 
 
    tooltip.html(tooltipText[index].text) 
 
    .style("visibility", "visible") 
 
    .style("top",(d3.event.pageY+10)+"px") 
 
    .style("left",(d3.event.pageX+10)+"px"); 
 
    }) 
 
    .on("mouseout", function(){ 
 
    return tooltip.style("visibility", "hidden"); 
 
    }); 
 
    

 .container { 
 
     position: relative; 
 
     } 
 
    
 
     .tooltip { 
 
     font-family: Arial; 
 
     font-size: 10px; 
 
     padding: 10px; 
 
     width: 100px; 
 
     height: 20px; 
 
     border: 1px solid black; 
 
     position: absolute; 
 
     top: 0; 
 
     left: 200px; 
 
     visibility: hidden; 
 
     background: white; 
 
     } 
 
     
 
     #white { 
 
     fill: white; 
 
     stroke: black; 
 
     stroke-width: 2px 
 
     } 
 
     
 
     #black { 
 
     fill: black 
 
     } 
 
     
 
     circle:hover { 
 
     stroke: green; !important 
 
     fill: orange; 
 
     stroke-width: 2px 
 
     } 
 
    

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 

 
<div class="container"> 
 
    <svg> 
 
    <g id="selection"> 
 
\t <circle id="white" class="st0" cx="49.2" cy="49.2" r="48.7"/> 
 
\t <circle id="black" class="st1" cx="128.4" cy="49.2" r="48.7"/> 
 
    </g> 
 
    </svg> 
 
</div> 
 

 
<div class="tooltip"></div>