企业官网建设流程全解析

d3-delaunay 完全指南：Voronoi 图与德劳内三角剖分究竟能做什么？

【免费下载链接】d3-delaunayCompute the Voronoi diagram of a set of two-dimensional points.项目地址: https://gitcode.com/gh_mirrors/d3/d3-delaunay

d3-delaunay 是 D3 生态中一个专注于几何计算的快速库，它的核心能力只有一句话：计算二维点集的 Voronoi 图（泰森多边形）与德劳内三角剖分（Delaunay triangulation）。它是基于 mapbox 的高性能库 Delaunator 构建的，通过扫描线算法在毫秒级完成数十万点的剖分，而 Voronoi 图正是连接相邻三角形外心得到的对偶结构。无论你是做数据可视化、地图分析、游戏开发还是创意编程，掌握 d3-delaunay 都能让你的"点"真正变得有用。本文用最少的代码，带你彻底看懂它能做什么、怎么用。

两个基础概念：德劳内三角剖分与 Voronoi 图是什么？

在深入 d3-delaunay 之前，先花 1 分钟搞懂这两个互为"对偶"的几何概念，它们是理解整个库的钥匙。

德劳内三角剖分：把一堆散乱的点用不交叉的三角形连接起来，并满足"空圆"性质——任意一个三角形的外接圆内不包含其他点。这个性质保证了三角形尽可能"饱满"，不会出现细长畸形的三角片，是生成网格的首选算法。

Voronoi 图：为每一个点划分一块"势力范围"，区域内任意位置到该点的距离都比到其他点更近。这些不规则多边形也叫泰森多边形，相邻两个单元共享的边界恰好是两点连线的垂直平分线。

有趣的是，把德劳内三角剖分中每个三角形的外心（外接圆圆心）连起来，就得到了 Voronoi 图——d3-delaunay 正是这样工作的，这个"由剖分到对偶"的思路写在 src/voronoi.js 中，计算外心的核心逻辑非常精巧。

快速上手：Delaunay 与 Voronoi 的最小示例

d3-delaunay 的 API 极其精简，全库只有两个核心类：Delaunay和Voronoi（导出定义见 src/index.js）。最常用的入门写法只要三行：

import {Delaunay} from "d3-delaunay"; const points = [[100, 100], [300, 100], [200, 300], [150, 250]]; const delaunay = Delaunay.from(points); // 一步得到三角剖分 const voronoi = delaunay.voronoi([0, 0, 960, 500]); // 一步得到 Voronoi 图

Delaunay.from还支持传入自定义坐标访问器，比如数据是{x, y}对象时写成Delaunay.from(data, d => d.x, d => d.y)即可。之后你可以调用：

• delaunay.render()绘制三角网格，renderHull()绘制凸包，renderPoints()绘制散点；
• voronoi.render()绘制完整的 Voronoi 网格，renderCell(i)单独绘制第 i 个单元；
• voronoi.contains(i, x, y)判断某坐标属于哪个单元——这是"最近邻查询"的关键；
• voronoi.neighbors(i)遍历相邻单元，适合做区域邻接分析。

所有渲染方法都支持传入 Canvas 2D context 直接绘制，或者传入内置的 SVG path 生成器拿到路径字符串（相关实现见 src/path.js 与 src/polygon.js）。

Voronoi 图与边界裁剪：让图形落进画布

默认情况下 Voronoi 图在平面上是无限延伸的，所以 d3-delaunay 支持传入矩形边界[xmin, ymin, xmax, ymax]对单元进行裁剪。这一设计非常贴心：每个单元都被裁剪成矩形内的闭合多边形，直接就能用于填充、描边或命中检测。

裁剪逻辑相当健壮：即使出现重合点、共线点等退化情况，库也能给出合理的处理（相关测试见 test/delaunay-test.js 和 test/voronoi-test.js），让你无需关心边缘极端情况。

实际应用：Voronoi 图与三角剖分能解决什么问题？

理解了 API，更要看到它的价值。以下是 d3-delaunay 最常见的几类真实应用场景：

1. 最近邻与区域归属：快递站覆盖、外卖配送范围、移动基站选址，本质都是"每个点负责哪片区域"，用voronoi.contains一查便知。
2. 地图与地形网格：从高程采样点生成 Delaunay 三角网（TIN），可做三维地形渲染、等高线生成和路径规划。
3. 游戏与物理模拟：用 Voronoi 图划分领地区域、生成随机地图，或为多智能体做空间分区，避免全量两两比较。
4. 创意视觉与艺术生成：将照片按 Voronoi 单元着色，可以做出令人惊艳的"多边形马赛克"艺术效果，下图的肖像正是典型玩法。

5. 网格生成与有限元分析：Delaunay 三角剖分"三角形最饱满"的特性，让它成为有限元剖分、布料模拟、流体粒子系统的首选基础网格。

性能与项目结构：为什么值得信赖

d3-delaunay 的性能非常出色：底层复用 Delaunator 的扫描线三角剖分算法，构建与更新都很快，且支持update()增量重算（点移动后只需一行代码刷新，见 src/delaunay.js 中的update方法）。测试用例覆盖了重合点、共线退化、边界裁剪等大量边界情况，工程质量有保障。

如果你对这个库的内部实现感兴趣，仓库结构非常清晰：src/下只有 5 个文件，delaunay.js负责三角剖分与点查找，voronoi.js负责外心计算、无限射线与矩形裁剪，polygon.js与path.js提供多边形和路径渲染支持。想深入源码学习几何算法，这是个绝佳的起点。

总结

d3-delaunay 用极小的 API 面积，封装了德劳内三角剖分与 Voronoi 图这两大计算几何核心工具。无论你只想给散点图加一层"蜂窝网格"背景，还是想构建完整的空间分析系统，它都能在几行代码内帮你搞定。安装后按本文的示例跑通第一个 Voronoi 图，剩下的创意就交给你了。

【免费下载链接】d3-delaunayCompute the Voronoi diagram of a set of two-dimensional points.项目地址: https://gitcode.com/gh_mirrors/d3/d3-delaunay