我正在从 json 数据和 d3 创建一个表，如下所示:https://jsfiddle.net/rpardee/ku3q6txw/41/
我使用 mouseenter 和 d3.mouse() 来获取鼠标指针的 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() 方法中的内容时遇到了困难。
有人可以给我线索吗？
最佳答案
可以使用 d3.event.pageX 和 d3.event.pageY ( reference ) 检索鼠标位置。这些坐标可以直接用于翻译:
// 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/
关于javascript - 在 d3.js 中使用 translate() 将工具提示放置在表格单元格上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60918665/