在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"
                    }
                })

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