使用 d3.js 中的 translate() 在表格单元格上放置工具提示

Question

我正在从 json 数据和 d3 创建一个表，如下所示： https : //jsfiddle.net/rpardee/ku3q6txw/41/

我正在使用带有 d3.mouse() 的 mouseenter 来获取鼠标指针的 x,y 坐标，但需要将从 .mouse() 返回的坐标转换为可以输入到 translate() 中的像素位置，以便正确放置工具提示。 到目前为止，我的挥杆导致：

    // Move the tooltip over to where the mouse pointer is
    // There has *got* to be a better way of doing this.
    const coords = d3.mouse(this);
    const xpos = table._groups[0][0].clientWidth - coords[0] ;
    const ypos = table._groups[0][0].clientHeight - coords[1] ; ;
    imp_tooltip.style("transform", `translate(${xpos}px, ${ypos}px)`) ;

这很接近，但还不够接近。

我猜我可以设置一个 d3.scaleLinear() 来进行这个翻译，但是我在试图弄清楚要向那个人的 .domain() 和 range() 方法中输入什么内容时遇到了困难。

有人可以给我一个线索吗？

Answer 1

鼠标的位置可以用d3.event.pageX和d3.event.pageY (参考) 检索。 这些坐标可以直接用于翻译：

// Move the tooltip over to where the mouse pointer is
const xpos = d3.event.pageX ;
const ypos = d3.event.pageY ;
imp_tooltip.style("transform", `translate(${xpos}px, ${ypos}px)`) ;

更新 jsfiddle： https ://jsfiddle.net/mohgpr2c/1/