如何在鼠标悬停时将动态坐标数据显示到Tooltip中？

问题分析 #

原代码存在三个关键问题：

• 变量声明顺序错误：tooltip变量在绑定鼠标事件之后才定义，触发mouseover时tooltip还未初始化
• Tooltip内容获取错误：html()方法的回调参数使用不当，无法正确获取当前圆形的坐标数据
• 样式与位置缺失：未给Tooltip添加基础样式，且位置固定，既不可见也不实用

修复后的完整代码 #

const data = [
  [90, 123],
  [120, 55],
  [55, 13],
];

// 先创建Tooltip元素，确保事件绑定前已存在
const tooltip = d3
  .select('body')
  .append('div')
  .attr('class', 'tooltip')
  .style('opacity', 0)
  .style('position', 'absolute')
  .style('background', '#fff')
  .style('border', '1px solid #ccc')
  .style('padding', '8px')
  .style('border-radius', '4px')
  .style('pointer-events', 'none'); // 避免Tooltip干扰鼠标事件

const svg = d3
  .select('body')
  .append('svg')
  .attr('width', 200)
  .attr('height', 200);

const circles = svg
  .selectAll('circle')
  .data(data)
  .enter()
  .append('circle')
  .attr('cx', (d) => d[0])
  .attr('cy', (d) => d[1])
  .attr('r', 10)
  .style('fill', '#2ecc71'); // 给圆形添加颜色，方便识别

// 绑定鼠标事件
circles
  .on('mouseover', function(event, d) {
    tooltip
      .style('opacity', 1)
      .html(`坐标: (${d[0]}, ${d[1]})`) // 直接使用绑定的数据d获取坐标
      .style('left', `${event.pageX + 10}px`) // 跟随鼠标位置
      .style('top', `${event.pageY + 10}px`);
  })
  .on('mouseout', () => tooltip.style('opacity', 0));

关键修复说明 #

• 调整变量顺序：将tooltip的创建代码移到事件绑定之前，确保DOM元素已存在
• 正确获取数据：在mouseover事件中，通过第二个参数d直接获取当前圆形绑定的坐标数据，拼接成Tooltip内容
• 添加基础样式：给Tooltip设置绝对定位、背景、边框等样式，保证可见性；设置pointer-events: none避免遮挡鼠标交互
• 跟随鼠标位置：利用事件对象event的pageX/pageY属性，让Tooltip显示在鼠标附近，提升交互体验

内容的提问来源于stack exchange，提问作者Sergey