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

import * as d3 from "d3";

// ... 其他React Hooks和变量定义 ...

const width = 600;
const height = 500;

// 错误示范：未指定bounds，使用默认边界
const voronoi = d3.Delaunay.from(data).voronoi();

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

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

import React, { useEffect, useRef } from "react";
import * as d3 from "d3";
// import "../App.css"; // 假设有CSS样式文件

const VoronoiDiagram = () => {
  const svgRef = useRef(null);
  const width = 600;
  const height = 500;

  useEffect(() => {
    // 确保在组件挂载后执行D3操作
    if (!svgRef.current) return;

    // 随机生成示例数据点
    const data = Array.from({ length: 200 }, () => [
      Math.random() * width,
      Math.random() * height,
    ]);

    const svg = d3.select(svgRef.current);

    // 清除之前的绘制，防止重复渲染
    svg.selectAll("*").remove();

    // 设置SVG的尺寸
    svg.attr("width", width).attr("height", height);

    // 核心修正：创建Voronoi生成器时，明确指定裁剪边界
    // bounds 参数格式为 [xmin, ymin, xmax, ymax]
    // 这里使用 1 像素的内边距，以避免单元格精确触及SVG边缘
    const voronoi = d3.Delaunay.from(data).voronoi([1, 1, width - 1, height - 1]);

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

    // 绘制Voronoi单元格
    svg
      .selectAll("path")
      .data(data)
      .enter()
      .append("path")
      .attr("d", (d, i) => voronoi.renderCell(i)) // 使用renderCell绘制单个单元格路径
      .attr("fill", "none")
      .attr("stroke", "black");

    // 绘制数据点
    svg
      .selectAll("circle")
      .data(data)
      .enter()
      .append("circle")
      .attr("cx", (d) => xScale(d[0]))
      .attr("cy", (d) => d[1]) // 假设y坐标直接使用，如果需要可定义yScale
      .attr("r", 3)
      .attr("fill", "red");

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

  }, [width, height]); // 依赖项数组，确保当宽度或高度变化时重新渲染

  return <svg ref={svgRef}></svg>;
};

export default VoronoiDiagram;