D3.js Voronoi 图边界控制：避免超出 SVG 宽度

// ... 其他 D3.js 和 React 导入 ...

const width = 600;
const height = 500;

// 未指定 bounds，Voronoi 图可能使用默认边界 [0, 0, 960, 500]
const voronoi = d3.Delaunay.from(data).voronoi();

// ... 后续绘制代码 ...

const width = 600;
const height = 500;

// 明确指定 Voronoi 图的裁剪边界，与 SVG 尺寸匹配
// 这里内缩 1 像素，避免单元格直接贴合 SVG 边缘
const voronoi = d3.Delaunay.from(data).voronoi([1, 1, width - 1, height - 1]);

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

const VoronoiDiagram = () => {
  const svgRef = useRef(null); // 用于获取 SVG 元素的引用
  const width = 600;
  const height = 500;
  const padding = 1; // 用于 Voronoi 边界的内边距

  useEffect(() => {
    // 确保 SVG 元素已挂载
    if (!svgRef.current) return;

    // 生成模拟数据点
    // 数据点的坐标应在 SVG 范围内
    const data = Array.from({ length: 200 }, () => [
      Math.random() * width,
      Math.random() * height,
    ]);

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

    // 清除 SVG 内所有旧内容，防止重复渲染导致元素累积
    svg.selectAll("*").remove();

    // 设置 SVG 容器的宽度和高度
    svg.attr("width", width).attr("height", height);

    // 创建 Voronoi 生成器，并明确设置其裁剪边界
    // 边界应与 SVG 尺寸匹配，可适当内缩以避免边缘重叠
    const voronoi = d3.Delaunay.from(data).voronoi([
      padding,
      padding,
      width - padding,
      height - padding,
    ]);

    // 定义 X 轴的线性比例尺
    const xScale = d3
      .scaleLinear()
      .domain([0, d3.max(data, (d) => d[0]) || width]) // 确保 domain 有效，避免 d3.max 返回 undefined
      .range([0, width]);

    // 定义 Y 轴的线性比例尺
    // 注意：SVG 的 Y 轴原点在顶部，通常需要反转 range 来使 Y 轴向上增长
    const yScale = d3
      .scaleLinear()
      .domain([0, d3.max(data, (d) => d[1]) || height])
      .range([height, 0]);

    // 绘制 Voronoi 单元格
    svg
      .selectAll(".voronoi-cell")
      .data(data)
      .enter()
      .append("path")
      .attr("class", "voronoi-cell") // 添加 class 便于 CSS 样式控制
      .attr("d", (d, i) => voronoi.renderCell(i)) // 使用 renderCell 方法生成路径
      .attr("fill", "none") // 单元格内部不填充颜色
      .attr("stroke", "black") // 单元格边框颜色
      .attr("stroke-width", 0.5); // 单元格边框宽度

    // 绘制数据点
    svg
      .selectAll(".data-point")
      .data(data)
      .enter()
      .append("circle")
      .attr("class", "data-point") // 添加 class 便于 CSS 样式控制
      .attr("cx", (d) => xScale(d[0])) // 使用 xScale 映射 X 坐标
      .attr("cy", (d) => yScale(d[1])) // 使用 yScale 映射 Y 坐标
      .attr("r", 3) // 点的半径
      .attr("fill", "red"); // 点的填充颜色

    // 绘制 X 轴
    const xAxis = d3.axisBottom(xScale); // 创建底部 X 轴
    svg
      .append("g")
      .attr("transform", `translate(0, ${height})`) // 将 X 轴移动到底部
      .call(xAxis);

    // 绘制 Y 轴
    const yAxis = d3.axisLeft(yScale); // 创建左侧 Y 轴
    svg
      .append("g")
      .attr("transform", `translate(0, 0)`) // Y 轴通常在左侧，默认位置
      .call(yAxis);
  }, [width, height]); // 依赖项数组，当 width 或 height 变化时重新运行 useEffect

  return (
    <div>
      <h3>D3.js Voronoi Diagram with Bounding Box</h3>
      <svg ref={svgRef} style={{ border: "1px solid #ccc" }}></svg>
    </div>
  );
};

export default VoronoiDiagram;