在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都在下面。但是我需要根据窗口位置显示工具提示。

例如：

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

所以我的问题是我需要根据Windows位置更改工具提示位置。请帮助我解决此问题。我在下面更新了我的小提琴链接。请看一下。

小提琴链接-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"
                    }
                })

希望你明白了，如果不要求我更多...