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

Question

我使用 d3.js 创建了一个 geo map。我在每个国家/地区创建了一个 tooptip。

基本上是在 mousemove 事件时创建工具提示。

工具提示代码：

.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>';                                                                               
       })   

})

我的工具提示正常工作 fine.I 使用 d3.event.pageX 和 d3.event.pageY 获取当前 location.Basically 正在更新工具提示样式 left 使用 d3.event.pageX 和top 与 d3.event.pageY.

到目前为止，tooltip 低于每个 country.But 我需要显示基于 window 位置的工具提示。

例如：

如果我 mousemove 像 United states 这样的排名靠前的国家，我需要显示 tooltip 低于 country.Suppose 如果我mousemove 在 Antarctica 我需要显示 tooltip 在国家（因为 Antarctica 是 bottom country 所以tooltip 无法在页面中正确显示）

所以我的问题是我需要根据 windows postion.Please 帮助我解决 this.I 更新我的 fiddle link below.Kindly 看看。

Fiddle Link - 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 如何根据屏幕位置调整工具提示（上下）？

In d3.js How to adjust tooltip (up and down) based on the screen position?

javascript

d3.js

工具提示代码：

例如：