配列のテキストを使ってSVG要素にツールチップを追加する

Question

SVGサークルが複数あり、それぞれのテキストがホバー上のツールチップに表示されるようにしたいと思います。

私はAdobe IllustratorでSVG要素を作成するので、ツールチップのテキストをSVGのIDにバインドする必要があります。

以下は、SVG circle id = "＃white"の名前と一致するオブジェクト "color：white"を持つ配列を作成することでこれを実行しようとしました。このデータをツールチップにどのようにバインドできますか？お使いのアレイを通して我々ループ、そして、

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

し、対応する値を取得する：まず

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

は、我々はあなたのmousemove内でこの行の円のIDを取得

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

ここにあなたの最新のスニペットがあります：

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>