L'info-bulle ne disparaît pas lors du passage à la souris

Question

J'essaie d'ajouter une info-bulle à un rect. Il survole le pointeur de la souris en survolant une barre, mais ne veut pas disparaître lors d'un événement de type mouseout. J'ai aussi essayé d'utiliser div.style ("display", "none"), mais ça ne marche pas non plus. Pour une raison quelconque, il ne veut pas déclencher l'événement mouseover à nouveau après le passage du curseur. Il continue juste d'afficher une info-bulle.

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() 

      }) 

Qu'est-ce que je fais mal ici?

Answer 1

Le problème se trouve ici:

d3.select(div).remove() 

Comme div est lui-même une sélection, vous choisissez une sélection, et que peu de sens.

Au lieu de cela, il suffit d'utiliser div dans le mouseout:

div.remove() 

Ou, encore mieux, juste régler son opacité à zéro:

div.style("opacity", 0) 

Voici les bl.ocks mis à jour avec juste ce changement: http://bl.ocks.org/anonymous/raw/13ce2445b248fb9e44dcd33cfc3dff36/dff0c60423927960cab8aaf9e613c2c3ae205808/