本教程旨在解决 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 图的单元格也可能根据默认的 960×500 边界进行计算和渲染。当您的 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 ref={mySVGRef}></svg>; };
在上述代码中，尽管 SVG 元素被明确设置为 width=600 和 height=500，但由于 voronoi() 方法没有接收 bounds 参数，它会使用默认边界进行计算，导致最终渲染的 Voronoi 单元格可能超出 600×500 的区域。
解决方案：明确指定 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 <svg ref={svgRef}></svg>; }; export default VoronoiChart;
纯 D3 可运行示例 (用于快速测试和理解)
为了方便读者快速测试和理解，以下提供一个纯 D3 的 html 文件示例，可以直接在浏览器中运行。
<!DOCTYPE html> <html> <head> <title>D3 Voronoi Bounds Example</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.0/d3.min.js"></script> <style> body { margin: 0; overflow: hidden; font-family: sans-serif; } svg { border: 1px solid #ccc; background-color: #f9f9f9; } .x-axis path, .y-axis path { stroke: #333; } .x-axis line, .y-axis line { stroke: #ccc; } .x-axis text, .y-axis text { fill: #333; font-size: 10px; } </style> </head> <body> <h1>D3 Voronoi Diagram with Custom Bounds</h1> <svg id="voronoi-svg"></svg> <script> const width = 600; const height = 500; // 模拟数据：200个随机点 const data = Array.from({ length: 200 }, () => [ Math.random() * width, Math.random() * height, ]); const svg = d3.select("#voronoi-svg"); svg.attr("width", width).attr("height", height); // 关键：创建 Voronoi 生成器时指定边界 // [xmin, ymin, xmax, ymax] 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]); // 定义 Y 轴比例尺 (注意 D3 中 SVG 的 Y 轴方向是向下增长的，所以 range 需要反转) const yScale = d3 .scaleLinear() .domain([