在D3.js折线图中悬停数据点返回未定义

<script src="https://d3js.org/d3.v7.min.js"></script>

<div id="chart"></div>

// 数据
var data = [
  { date: "2022-01-01", value: 10 },
  { date: "2022-01-02", value: 20 },
  { date: "2022-01-03", value: 15 },
  // 其他数据...
];

// 创建SVG容器
var svg = d3.select("#chart")
  .append("svg")
  .attr("width", 400)
  .attr("height", 300);

// 定义比例尺
var xScale = d3.scaleTime()
  .domain(d3.extent(data, function(d) { return new Date(d.date); }))
  .range([0, 400]);

var yScale = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) { return d.value; })])
  .range([300, 0]);

// 绘制折线
var line = d3.line()
  .x(function(d) { return xScale(new Date(d.date)); })
  .y(function(d) { return yScale(d.value); });

svg.append("path")
  .datum(data)
  .attr("d", line)
  .attr("fill", "none")
  .attr("stroke", "steelblue")
  .attr("stroke-width", 2);

// 添加数据点
svg.selectAll(".dot")
  .data(data)
  .enter()
  .append("circle")
  .attr("class", "dot")
  .attr("cx", function(d) { return xScale(new Date(d.date)); })
  .attr("cy", function(d) { return yScale(d.value); })
  .attr("r", 4)
  .attr("fill", "steelblue")
  .on("mouseover", function(d) {
    // 鼠标悬停事件处理
    d3.select(this)
      .attr("r", 6)
      .attr("fill", "orange");
      
    // 显示数据点数值
    svg.append("text")
      .attr("class", "value")
      .attr("x", xScale(new Date(d.date)) + 10)
      .attr("y", yScale(d.value) - 10)
      .text(d.value);
  })
  .on("mouseout", function(d) {
    // 鼠标移出事件处理
    d3.select(this)
      .attr("r", 4)
      .attr("fill", "steelblue");
      
    // 移除数据点数值
    svg.select(".value").remove();
  });