工具提示不会在鼠标移出时消失

Question

我正在尝试向工具提示添加工具提示。它会在鼠标指针悬浮在条上弹出，但它不想在mouseout事件中消失。我也尝试使用div.style（“display”，“none”），但它也不起作用。出于某种原因，它不想在鼠标移出后再次触发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

的问题就在这里：

d3.select(div).remove() 

由于div本身就是一种选择，你选择的选择，这没有什么意义。

取而代之的是，就在mouseout使用div：

div.remove() 

，或者甚至更好，只需设置其不透明度为零：

div.style("opacity", 0) 

这里是更新bl.ocks只那个变化：http://bl.ocks.org/anonymous/raw/13ce2445b248fb9e44dcd33cfc3dff36/dff0c60423927960cab8aaf9e613c2c3ae205808/