使用d3的工具提示-提示不显示

// 创建一个SVG容器
var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 500);

// 创建一个数据点
var data = [10, 20, 30, 40, 50];

// 绘制数据点的圆形元素，并添加工具提示
svg.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", function(d, i) {
    return i * 50 + 50;
  })
  .attr("cy", 50)
  .attr("r", 10)
  .on("mouseover", function(d) {
    // 鼠标悬停事件处理函数
    d3.select(this)
      .attr("fill", "red"); // 可以在这里添加一些视觉效果，如修改颜色、大小等

    // 计算工具提示的位置
    var x = d3.event.pageX;
    var y = d3.event.pageY;

    // 更新工具提示的内容
    tooltip
      .style("left", x + "px")
      .style("top", y + "px")
      .text("数值：" + d);

    // 显示工具提示
    tooltip.style("display", "block");
  })
  .on("mouseout", function(d) {
    // 鼠标移出事件处理函数
    d3.select(this)
      .attr("fill", "black"); // 恢复原始样式

    // 隐藏工具提示
    tooltip.style("display", "none");
  });

// 创建工具提示元素
var tooltip = d3.select("body")
  .append("div")
  .attr("class", "tooltip")
  .style("display", "none");