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

这是一个有效的代码段。

＆＃13;

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");

＆＃13;

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

＆＃13;

Answer 2

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

div.attr("display", display);

到

 div.hide();

以下是.hide() or display: none? jQuery的评论 “匹配的元素将立即隐藏，没有动画。这大致相当于调用.css（'display'，'none'），除了显示属性的值保存在jQuery的数据缓存中，以便显示可以稍后恢复到其初始值。如果元素的显示值为内联，则隐藏并显示，它将再次以内联方式显示。“

Answer 3

display不是HTML属性，这是CSS。如果要隐藏元素，则需要将代码更改为此类：

div.css({ "display": "none" });

或者只使用jQuery快捷方式：div.hide();。

Answer 4

这看起来就像你在这里遵循教程一样，直到鼠标悬停事件中.html之前的额外空间。（这很好......我认识到这个小语法的唯一原因是因为我花了一整天时间盯着它！）

http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html

您发布了上面的相关代码，但是您是否还要使用select方法选择要操作的div？这可能就是为什么您的转换不按照您希望的方式工作的原因。

例如：

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

否则或另外正确的方法让工具提示消失是因为Gilsha在mouseout上用这一行回答：

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

获取.attr（＆＃34;显示＆＃34;：无）处理mouseout（D3.js）

4 个答案: