javascript - 获取.attr ("display":none) to work on mouseout (D3. js)

Question

我正在制作一个带有数据点弹出窗口/工具提示的交互式 D3.js 可视化，以便在鼠标悬停事件中，所选点旁边会出现一个弹出窗口，其中包含一些信息

目前我已经使用下面的代码实现了这一点——工具提示出现在鼠标悬停时。当用户将鼠标移动到另一个点时，原始工具提示消失，正确的工具提示出现在新数据点旁边。

但是，mouseout 事件没有正常运行 - 一旦鼠标离开数据点，工具提示就不会消失。例如，如果用户没有将鼠标移到新数据点上，旧的工具提示将保留在那里。

相关代码:

   svg.selectAll("path")
        //other stuff here
        .on("mouseover", function(d) {      
            div.transition()                
                .duration(200)   //mouseover transition does not seem to work, but that's minor
                .style("opacity", .8);      
            div .html(d.datetime.substring(0,10) )  
                .style("left", (d3.event.pageX + 5) + "px")     
                .style("top", (d3.event.pageY - 24) + "px")
                .attr("display", display);    
            })                  
        .on("mouseout", function(d) {       
            div.attr("display", none);   
        })

    //bit of code where I append the tooltip to the right element
    var div = d3.select("body").append("div")   
        .attr("class", "tooltip")               
        .style("opacity", .8);  
    });     

我做错了什么？

谢谢!

Answer 1

none 是一个字符串。所以你必须用引号将它括起来。另请注意，display 是一个 css 样式属性。所以它应该如下所示应用。

div.style("display","none");

实现相同的其他替代选项如下。

选项 2:

div.attr("hidden",true);//to hide
div.attr("hidden",null);//to show

选项 3:

div.style("opacity",0);//to hide
div.style("opacity",1);//to show

这是一个有效的代码片段。

var button = d3.select("body")
               .append("button")
               .text("Mouse Over Me");

button.on("mouseover",function(){    
    div.style("display","block");  
});
button.on("mouseout",function(){    
    div.style("display","none");  
});
var div = d3.select("body")
        .append("div")   
        .attr("class", "tooltip")               
        .style("display", "none")
        .text("Hello This is a sample");

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