D3.js Voronoi图边界控制：解决SVG溢出问题

// ... 其他D3.js和React相关代码 ...

const width = 600;
const height = 500;

// 创建一个Voronoi生成器，未指定边界
const voronoi = d3.Delaunay.from(data).voronoi(); 

const svg = d3.select(mySVGRef.current);
svg.attr("width", width).attr("height", height);

// ... 后续绘制Voronoi单元格和数据点 ...

import React, { useState, useEffect, useRef, useCallback } from "react";
import * as d3 from "d3";
import "../App.css";

const VoronoiChart = () => {
  const mySVGRef = useRef(null);
  const width = 600;
  const height = 500;

  // 示例数据，实际应用中会从props或state获取
  const [data, setData] = useState([]);

  useEffect(() => {
    // 模拟数据生成
    const generateData = () => {
      return Array.from({ length: 100 }, () => [
        Math.random() * width,
        Math.random() * height,
      ]);
    };
    setData(generateData());
  }, [width, height]);

  useEffect(() => {
    if (!mySVGRef.current || data.length === 0) return;

    const svg = d3.select(mySVGRef.current);
    svg.attr("width", width).attr("height", height);

    // 关键修正：为voronoi生成器指定边界
    // 使用 [1, 1, width-1, height-1] 可以为边界留出1像素的微小间隙，避免边缘裁剪过于紧密
    const voronoi = d3.Delaunay.from(data).voronoi([1, 1, width - 1, height - 1]);

    const xScale = d3
      .scaleLinear()
      .domain([0, d3.max(data, (d) => d[0])])
      .range([0, width]);

    const yScale = d3
      .scaleLinear()
      .domain([0, d3.max(data, (d) => d[1])])
      .range([height, 0]); // Y轴通常是反向的，0在顶部，height在底部

    // 绘制Voronoi单元格
    svg
      .selectAll(".voronoi-path")
      .data(data)
      .join("path") // 使用join代替enter().append()，更现代的D3写法
      .attr("class", "voronoi-path")
      .attr("d", (d, i) => voronoi.renderCell(i))
      .attr("fill", "none")
      .attr("stroke", "black")
      .attr("stroke-width", 0.5);

    // 绘制数据点
    svg
      .selectAll(".data-point")
      .data(data)
      .join("circle")
      .attr("class", "data-point")
      .attr("cx", (d) => xScale(d[0]))
      .attr("cy", (d) => yScale(d[1])) // 使用yScale
      .attr("r", 3)
      .attr("fill", "red");

    // 绘制X轴
    const xAxis = d3.axisBottom(xScale);
    svg
      .append("g")
      .attr("transform", `translate(0, ${height})`)
      .call(xAxis);

    // 绘制Y轴 (可选)
    const yAxis = d3.axisLeft(yScale);
    svg
      .append("g")
      .call(yAxis);

  }, [data, width, height]);

  return (
    <svg ref={mySVGRef}></svg>
  );
};

export default VoronoiChart;

const voronoi = d3.Delaunay.from(data).voronoi([1, 1, width - 1, height - 1]);