托管在sharepoint上时，D3工具提示位置偏移鼠标

Question

我有以下HTML

<div id="chart1">
    <div class="tooltip"></div>
</div>

这是工具提示的CSS

.tooltip
{
    position: absolute;
    border: 1px dashed gray;
    background-color: white;
    padding: 5px 20px;

    min-width: 50px;
    min-height: 20px;
    text-align: center;
    visibility: hidden;
    pointer-events: none; 
}

这是我的JS

pie.on("mouseenter",function(){
    d3.select("#chart1 .tooltip").style("visibility", "visible");
    })
    .on('mousemove',function(d){
    var tooltip = d3.select("#chart1 .tooltip");
    show_data(tooltip,d);  // custom function to populate tooltip html

    tooltip.style("left", (d3.event.pageX - 50) + "px")     
           .style("top", (d3.event.pageY - 40) + "px");
});

这完全适用于我的本地计算机，包括Chrome和Explorer Edge。 但是当我在sharepoint上托管所有文件时，工具提示会偏离鼠标指针。它仍然遵循与鼠标相同的方向，但Y位置存在间隙。

请参阅下面的图片，了解发生了什么。

我尝试了一些组合，包括使用window.pageYOffset，但这不起作用。我确信sharepoint正在场景后面添加iframes或子html文档，这使得SVG元素上的鼠标位置与直接显示文件时不同，无需共享点干预。

如何使工具提示粘贴到sharepoint托管文件上的鼠标位置？

Answer 1

我设法找到了解决问题的方法。

我决定在我的图表中创建一个SVG组，而不是用工具提示数据填充纯html元素。

在所有浏览器中都能很好地工作，甚至在本地

var pie = svg.selectAll(".pie")
   .on('mouseenter',show_tooltip)
   .on('mousemove',move_tooltip)
   .on('mouseout',hide_tooltip );


function create_tooltip() {
    tooltip = svg.append("g")
                 .attr("class","tooltip");

    tooltip.append("rect").attr("class","box");
    tooltip.append("text").attr("id","division");

    tooltip.append("rect").attr("id","legend")
                          .attr("width","20")
                          .attr("height","20");

}

function move_tooltip(d) {
    var coords = d3.mouse(this);
    var x = coords[0] - 30;
    var y = coords[1] - 40;
    tooltip.attr("transform","translate("+x+","+y+")");
}


function hide_tooltip(d) {
    tooltip.transition().attr("opacity","0");
}

function show_tooltip(d) {
    tooltip.transition().delay(500).attr("opacity","0.95");
    tooltip.select("#division").text(d.data.division);
    tooltip.select("#legend").attr("fill",function(){ 
        return color(d.data.division) 
    });
}