本教程旨在解决 d3.js voronoi 图在渲染时超出其指定 svg 容器宽度的问题。核心在于理解 `d3-delaunay` 库中 `voronoi()` 方法的 `bounds` 参数。通过明确设置 voronoi 生成器的边界，使其与 svg 元素的实际尺寸匹配，可以有效确保图表的正确裁剪和显示，避免内容溢出。
D3.js 作为强大的数据可视化库，常用于生成复杂的图表，其中 Voronoi 图因其独特的空间划分能力而备受青睐。然而，开发者在使用 D3.js（尤其是在与 React.js 等前端框架结合时）创建 Voronoi 图时，可能会遇到图表内容超出其指定 SVG 容器边界的渲染问题。这种问题通常表现为 Voronoi 单元格被绘制在 SVG 区域之外，导致视觉上的混乱和布局错误。
理解 Voronoi 图的边界行为
当使用 d3.Delaunay.from(data).voronoi() 方法创建 Voronoi 生成器时，如果未明确提供渲染边界，D3 默认会使用一个固定的矩形区域作为裁剪边界。根据 d3-delaunay 库的文档，这个默认边界通常是 [0, 0, 960, 500]。这意味着，即使您的 SVG 元素被定义为不同的宽度和高度（例如 width = 600, height = 500），Voronoi 图的单元格也可能根据默认的 960x500 边界进行计算和渲染。当您的 SVG 尺寸小于默认边界时，Voronoi 图的部分内容就会溢出；如果 SVG 尺寸大于默认边界，则图表可能无法充分利用整个可用空间。
考虑以下原始代码片段中存在的问题：
import React, { useState, useEffect, useRef, useCallback } from "react";
import * as d3 from "d3";
import "../App.css";
const MyVoronoiChart = ({ data }) => {
const mySVGRef = useRef(null);
const width = 600;
const height = 500;
useEffect(() => {
if (!data || data.length === 0) return;
// 问题所在：未指定 voronoi 的边界
const voronoi = d3.Delaunay.from(data).voronoi();
const svg = d3.select(mySVGRef.current);
svg.attr("width", width).attr("height", height);
const xScale = d3
.scaleLinear()
.domain([0, d3.max(data, (d) => d[0])])
.range([0, width]);
// 假设存在 yScale
// 绘制 Voronoi 单元格
svg
.selectAll("path")
.data(data)
.enter()
.append("path")
.attr("d", (d, i) => voronoi.renderCell(i)) // 单元格可能超出 SVG 边界
.attr("fill", "none")
.attr("stroke", "black");
// ... 其他绘制逻辑
}, [data, width, height]);
return ;
};在上述代码中，尽管 SVG 元素被明确设置为 width=600 和 height=500，但由于 voronoi() 方法没有接收 bounds 参数，它会使用默认边界进行计算，导致最终渲染的 Voronoi 单元格可能超出 600x500 的区域。
解决方案：明确指定 bounds 参数
解决此问题的关键在于利用 d3-delaunay 库中 voronoi() 方法提供的可选 bounds 参数。该参数接受一个数组 [xmin, ymin, xmax, ymax]，用于精确定义 Voronoi 图的裁剪区域。
为了使 Voronoi 图完全适应 SVG 容器，我们应该将 bounds 参数设置为与 SVG 的 width 和 height 相对应的范围。通常，为了避免边缘的细微裁剪问题或增加一点内边距，可以稍微调整边界值，例如 [1, 1, width-1, height-1]。
将上述代码中的问题行修改如下：
// 修改前：const voronoi = d3.Delaunay.from(data).voronoi(); // 修改后： const voronoi = d3.Delaunay.from(data).voronoi([1, 1, width - 1, height - 1]);
通过传递 [1, 1, width - 1, height - 1] 作为 bounds 参数，我们明确告诉 Voronoi 生成器，其渲染和裁剪区域应限定在 (1,1) 到 (width-1, height-1) 的矩形范围内，这有效地将 Voronoi 图约束在 SVG 容器内部。
完整实现示例
以下是一个结合了 D3.js 和 React.js 思路（但在可运行示例中为纯 D3）的完整实现，展示了如何正确设置 Voronoi 图的边界。
React 组件结构 (概念性示例)
在 React 组件中，D3 渲染逻辑通常封装在 useEffect 钩子中，并使用 useRef 获取 SVG 元素的引用。
import React, { useEffect, useRef } from "react";
import * as d3 from "d3";
import "./App.css"; // 假设有样式文件
const VoronoiChart = ({ data, width, height }) => {
const svgRef = useRef(null);
useEffect(() => {
if (!data || data.length === 0) return;
const svg = d3.select(svgRef.current);
svg.attr("width", width).attr("height", height);
// 关键：创建 Voronoi 生成器，并明确指定边界
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轴通常是反向的
// 绘制 Voronoi 单元格
svg.selectAll(".voronoi-cell") // 使用类选择器以避免冲突
.data(data)
.join("path") // 使用 join() 进行更新、进入、退出操作
.attr("class", "voronoi-cell")
.attr("d", (d, i) => voronoi.renderCell(i))
.attr("fill", "none")
.attr("stroke", "black");
// 绘制数据点
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.select(".x-axis").remove(); // 移除旧的轴以避免重复
svg.append("g")
.attr("class", "x-axis")
.attr("transform", `translate(0, ${height})`)
.call(xAxis);
// 绘制 Y 轴 (可选)
const yAxis = d3.axisLeft(yScale);
svg.select(".y-axis").remove();
svg.append("g")
.attr("class", "y-axis")
.call(yAxis);
}, [data, width, height]); // 依赖项数组确保在数据或尺寸变化时重绘
return ;
};
export default VoronoiChart;纯 D3 可运行示例 (用于快速测试和理解)
为了方便读者快速测试和理解，以下提供一个纯 D3 的 HTML 文件示例，可以直接在浏览器中运行。
D3 Voronoi Bounds Example D3 Voronoi Diagram with Custom Bounds
