在鼠标悬停时在svg中添加文本不起作用d3.js

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

// 创建一个圆形元素
var circle = svg.append("circle")
  .attr("cx", 250)
  .attr("cy", 250)
  .attr("r", 50)
  .attr("fill", "blue");

// 创建一个文本元素，初始时不可见
var text = svg.append("text")
  .attr("x", 250)
  .attr("y", 250)
  .attr("text-anchor", "middle")
  .attr("alignment-baseline", "middle")
  .attr("fill", "white")
  .style("visibility", "hidden")
  .text("Hello, World!");

// 添加鼠标悬停事件处理程序
circle.on("mouseover", function() {
  // 鼠标悬停时显示文本
  text.style("visibility", "visible");
})
.on("mouseout", function() {
  // 鼠标移出时隐藏文本
  text.style("visibility", "hidden");
});