工具提示代码：

.on("mousemove", function(d) {  

    return tooltip
    .style("left",d3.event.pageX+"px")
    .style("top",d3.event.pageY+10+"px")
    .style("visibility", "visible")             

    .html(function() {

    return '<div style="border:1px solid #ccc;">'
            +'<p style="font-weight:bold;">'+ d.properties.name +'</p>'
            +'<div>'+d.properties.tooltip+'</div></div>';                                                                               
       })   

})

我的工具提示工作正常。我使用d3.event.pageX和d3.event.pageY获取当前位置。基本上我正在使用left和d3.event.pageX更新工具提示样式top d3.event.pageY。

到目前为止，每个国家/地区都会出现tooltip。但我需要根据窗口位置显示工具提示。

例如：

如果我mousemove排名最靠前的国家/地区United states我需要在国家/地区下方显示tooltip 。如果我mousemove超过Antarctica我需要在国家/地区上方显示tooltip （因为Antarctica是bottom country，因此tooltip无法正常显示页）

所以我的问题是我需要根据windows postion更改工具提示位置。请帮我解决这个问题。我在下面更新我的小提琴链接。好好看一下。

小提琴链接 - http://jsfiddle.net/sam0kqvx/36/

Answer 1

尝试计算，如果鼠标到达底部，如果鼠标位置在底部，则根据需要设置最高值。以下是代码

.style("top",function(){
                    if(current_position[1]+70 > 500){
                        return current_position[1]-50+"px";
                    }else{
                        return current_position[1]+100+"px"
                    }
                })

希望你明白了如果没有问我更多......

在d3.js中如何根据屏幕位置调整工具提示（向上和向下）？

工具提示代码：

例如：

1 个答案: