结合使用d3和React绘制散点图

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

const ScatterPlot = () => {
  const svgRef = useRef(null);

  useEffect(() => {
    // 获取SVG容器的引用
    const svg = d3.select(svgRef.current);

    // 定义数据
    const data = [
      { x: 10, y: 20 },
      { x: 30, y: 40 },
      { x: 50, y: 60 },
      // 更多数据...
    ];

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

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

    // 绘制散点图
    svg.selectAll('circle')
      .data(data)
      .enter()
      .append('circle')
      .attr('cx', d => xScale(d.x))
      .attr('cy', d => yScale(d.y))
      .attr('r', 5)
      .attr('fill', 'blue');
  }, []);

  return (
    <svg ref={svgRef} width={500} height={300}></svg>
  );
};

const App = () => {
  return (
    <div>
      <h1>散点图示例</h1>
      <ScatterPlot />
    </div>
  );
};

export default App;