如何在d3 react折线图中将X轴坐标值打印到控制台

import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';

const LineChart = () => {
  const chartRef = useRef(null);

  useEffect(() => {
    // 数据
    const data = [
      { x: 0, y: 5 },
      { x: 1, y: 10 },
      { x: 2, y: 15 },
      { x: 3, y: 7 },
      { x: 4, y: 12 },
    ];

    // 创建SVG容器
    const svg = d3.select(chartRef.current)
      .append('svg')
      .attr('width', 400)
      .attr('height', 300);

    // 创建比例尺
    const xScale = d3.scaleLinear()
      .domain([0, d3.max(data, d => d.x)])
      .range([0, 300]);

    const yScale = d3.scaleLinear()
      .domain([0, d3.max(data, d => d.y)])
      .range([250, 0]);

    // 创建折线生成器
    const line = d3.line()
      .x(d => xScale(d.x))
      .y(d => yScale(d.y));

    // 绘制折线图
    svg.append('path')
      .datum(data)
      .attr('d', line)
      .attr('fill', 'none')
      .attr('stroke', 'steelblue')
      .attr('stroke-width', 2);

    // 添加X轴坐标值打印功能
    svg.selectAll('.x-axis-tick')
      .data(data)
      .enter()
      .append('circle')
      .attr('cx', d => xScale(d.x))
      .attr('cy', 260)
      .attr('r', 3)
      .attr('fill', 'steelblue')
      .on('mouseover', d => console.log(`X轴坐标值：${d.x}`)); // 打印X轴坐标值到控制台
  }, []);

  return <div ref={chartRef}></div>;
};

export default LineChart;