Javascript 获取.attr（“display”：none）以处理mouseout（D3.js）

我正在制作一个交互式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);  
    });     

我做错了什么

谢谢

我想使用或。从

div.attr("display", display); 

到

以下是来自中国的评论

---

匹配的元素将立即隐藏，没有动画。这大致相当于调用.css（'display'，'none'），但display属性的值保存在jQuery的数据缓存中，以便以后可以将显示还原为其初始值。如果某个元素的显示值为inline，则该元素将隐藏并显示，它将再次内联显示。“

显示

不是HTML属性，这是CSS。如果要隐藏元素，则需要将代码更改为类似以下内容：

div.css（{“display”：“none”}）

或者只使用jQuery快捷方式：
div.hide（）是字符串。所以你必须用引号把它括起来。还要注意，
display
是一个css样式的属性。因此，应按如下所示进行应用

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

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按钮=d3.选择（“主体”）
.append（“按钮”）
.text（“鼠标悬停在我身上”）；
on（“mouseover”，function（）{
分区样式（“显示”、“块”）；
});
on（“mouseout”，function（）{
分区样式（“显示”、“无”）；
});
var div=d3。选择（“主体”）
.附加（“div”）
.attr（“类”、“工具提示”）
.style（“显示”、“无”）
.text（“您好，这是一个示例”）
这看起来像是您在按照本教程进行操作，一直到鼠标悬停事件中.html之前的额外空间。（这很好……我认识到这个小语法的唯一原因是因为我花了一整天的时间盯着它看！）


您发布了上面的相关代码，但您是否也在使用select方法选择要操作的div？这可能就是为什么你的转变没有按你希望的方式进行

例如：

除此之外，让工具提示消失的正确方法是Gilsha在mouseout上的这一行回答：

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

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