获取.attr("display":none)来处理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>

Answer 2

我想使用hide()或show()。改变自

div.attr("display", display); 

到

 div.hide();

这是来自 .hide() 或 display: none 的注释？jQuery "匹配的元素将立即隐藏，没有动画。这大致相当于调用 .css('display', 'none')，只不过将 display 属性的值保存在 jQuery 的数据缓存中，以便 display 可以之后会恢复到初始值。如果某个元素的显示值为 inline，那么隐藏并显示后，它会再次显示为 inline。”