解决D3.js Voronoi图在SVG中溢出边界的问题

import * as d3 from "d3";

// 假设 width 和 height 是 SVG 的期望尺寸
const width = 600;
const height = 500;
// 假设 data 是包含二维坐标点的数据数组

// 问题：未指定边界，可能导致Voronoi图溢出
const voronoi = d3.Delaunay.from(data).voronoi();

// 后续绘制SVG元素和Voronoi单元格的代码
// ...

const voronoi = d3.Delaunay.from(data).voronoi([xmin, ymin, xmax, ymax]);

import React, { useState, useEffect, useRef, useCallback } from "react";
import * as d3 from "d3";
import "../App.css"; // 假设有相关的CSS样式

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

  // 示例数据生成，实际应用中替换为你的数据
  const data = Array.from({ length: 200 }, () => [
    Math.random() * width,
    Math.random() * height,
  ]);

  useEffect(() => {
    if (!mySVGRef.current) return;

    // 使用 bounds 参数定义Voronoi图的裁剪区域
    // 这里的 [1, 1, width - 1, height - 1] 提供了1像素的内边距，
    // 以避免单元格边缘与SVG边界完全重合可能导致的视觉问题
    const voronoi = d3.Delaunay.from(data).voronoi([1, 1, width - 1, height - 1]);

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

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

    // 清除旧的图表元素，以支持React的重新渲染
    svg.selectAll("*").remove();

    // 绘制Voronoi单元格
    svg
      .selectAll("path")
      .data(data)
      .enter()
      .append("path")
      .attr("d", (d, i) => voronoi.renderCell(i))
      .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().scale(xScale);
    svg
      .append("g")
      .attr("transform", `translate(0, ${height})`)
      .call(xAxis);

    // 可以在此处添加Y轴
    // const yScale = d3.scaleLinear().domain([0, d3.max(data, d => d[1])]).range([height, 0]);
    // const yAxis = d3.axisLeft().scale(yScale);
    // svg.append("g").call(yAxis);

  }, [data, width, height]); // 依赖项，当数据或尺寸变化时重新渲染

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

export default VoronoiDiagram;