マウスアウト時にツールチップが消えない

Question

ツールチップをrectに追加しようとしています。バー上にマウスポインタを置いたときにポップアップ表示されますが、mouseoutイベントでは消えたくありません。 div.style（ "display"、 "none"）も使用しようとしましたが、どちらも機能しません。何らかの理由で、mouseoutの後でmouseoverイベントを再度トリガしたくない。ちょうどツールチップを表示し続けます。

http://bl.ocks.org/edkiljak/dc85bf51a27122380c68909cdd09d388

div.tooltip { 
      position: absolute; 
      text-align: left; 
      padding: 4px; 
      font-family: Lato, arial, sans-serif; 
      font-size: 14px; 
      background: #eee; 
      border-radius: 2px; 
      border: 1px solid gray; 
      pointer-events: none; 
     } 



var div = d3.select("body") 
       .append("div") 
       .attr("class", "tooltip") 
       .style("opacity", 0); 

var bars = barGroup.selectAll("rect") 
      .data(data) 
      .enter() 
      .append("rect") 
      .attr("x", 0) 
      .attr("y", function (d) { 
       return heightScale(d.Vendor); 
      }) 
      .attr("width", function (d) { 
       return widthScale(+d.Share2016) 
      }) 
      .attr("height", heightScale.bandwidth()/1.1) 
      .style("fill", function (d, i) { 
       return color(i); 
      }) 
      .on("mouseover",function (d){ 

       div.transition() 
        .duration(200) 
       div 
        .style("opacity", .9) 
        .html("Vendor: " + "<strong>" + d.Vendor + "</strong>" + "<br>" + "Market share in 2016: " + d.Share2016 + "%") 
        .style("left", (d3.event.pageX) + "px") 
        .style("top", (d3.event.pageY - 28) + "px"); 


       d3.select(this) 
        .style("fill", "#93ceff") 



      }) 
      .on("mouseout", function(){ 
       d3.select(this) 
        .transition() 
        .duration(50) 
        .style("fill", function(d,i){ 
         return color(i); 
        }) 

       d3.select(div).remove() 

      }) 

私はここで間違って何をしているのですか？

Answer 1

問題はここにある：divとして

d3.select(div).remove() 

をあなたは選択を選択している、選択そのものであり、そしてそれはほとんど意味がありません。その代わりの

は、ちょうどmouseoutでdivを使用します。

div.remove() 

または、より良い、単にゼロにその不透明度を設定します。ここでは

div.style("opacity", 0) 

だけで更新bl.ocksですその変更：http://bl.ocks.org/anonymous/raw/13ce2445b248fb9e44dcd33cfc3dff36/dff0c60423927960cab8aaf9e613c2c3ae205808/