D3工具提示不在鼠标附近显示

// 创建一个SVG元素并设置其属性
var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 500);

// 创建一个矩形元素并添加鼠标悬停事件监听器
svg.append("rect")
  .attr("x", 100)
  .attr("y", 100)
  .attr("width", 200)
  .attr("height", 200)
  .on("mouseover", showTooltip)
  .on("mouseout", hideTooltip);

// 创建工具提示元素
var tooltip = d3.select("body")
  .append("div")
  .style("position", "absolute")
  .style("background-color", "white")
  .style("padding", "5px")
  .style("display", "none");

// 鼠标悬停事件的回调函数
function showTooltip() {
  var x = d3.event.pageX;
  var y = d3.event.pageY;

  // 设置工具提示的位置
  tooltip.style("left", x + "px")
    .style("top", y + "px");

  // 设置工具提示的内容
  tooltip.html("This is a tooltip");

  // 显示工具提示
  tooltip.style("display", "block");
}

// 鼠标移出事件的回调函数
function hideTooltip() {
  // 隐藏工具提示
  tooltip.style("display", "none");
}