如何让我的工具提示弹出我的鼠标在 d3.js 中的位置？答案

【问题标题】：How to make my tooltip popup where my mouse is in d3.js?如何让我的工具提示弹出我的鼠标在 d3.js 中的位置？
【发布时间】：2022-10-18 22:59:00
【问题描述】：

我在同一个正文中使用 d3 创建了两个条形图。我的下一个目标是创建一个工具提示，以便每当我的鼠标悬停在条形图中的一个条上时弹出。工具提示将返回该特定条的 y 轴值。这是我到目前为止所拥有的：

// tooltip
const tooltip = d3.select('body').append('div')
 .attr('class', 'tooltip')
 .style('opacity', 0);


d3.selectAll(".yearBar")
.on("mouseover", function(event, d)
{
    // FIXME your code here
    d3.select(this)
        .style("fill", "red")

    const text = d3.select('.tooltip');
    text.text(`Revenue was ${d.Revenue} in ${d.Year}`);
    const [x, y] = d3.pointer(event);

    tooltip
      .attr('transform', `translate(${x}, ${y})`)
      .style('opacity', 1);

    console.log("mouse over a year bar")
})
.on("mouseout",function()
{
    // FIXME your code here
    d3.selectAll(".yearBar")
      .style("fill", "#7472c0");
    
    //remove tooltip 
    tooltip.style('opacity', 0);
      
    console.log("mouse leaving a year bar")
});

我将此工具提示用作全局变量，因此工具提示应弹出并适用于两个条形图。这是输出

当我将鼠标悬停在条上时，条变为红色，我希望工具提示出现在条的正上方。但是，我的工具提示出现在条形图下方，这不是我想要的。我希望这也适用于我呈现的另一个条形图下方，当我将鼠标悬停在该图中的条形上时，输出是并且工具提示出现在与第一个条形图相同的位置。

【问题讨论】：

标签： javascript html css d3.js

【解决方案1】：

当鼠标进入一个栏时，d3.pointer(event) 返回鼠标相对于栏的位置，这不是您想要放置工具提示的位置。工具提示应根据栏的数据定位。此外，最好在 svg 中使用一个元素，以便能够在与图表相同的系统坐标中应用转换。

看这个例子：https://codepen.io/ccasenove/pen/RwymRdg

工具提示是 svg 中的 text 元素，工具提示坐标是使用与图表中的条形相同的比例计算的。

【讨论】：