javascript - 托管在共享点上时 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 在后台添加 iframe 或 sub-html 文档，这使得鼠标在 SVG 元素上的位置与在没有 Sharepoint 干预的情况下直接显示文件时不同。

如何使工具提示固定在 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) 
    });
}