企业官网建设流程全解析

d3-delaunay vs delaunator vs d3-voronoi：三角剖分与 Voronoi 库如何选型？

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

在前端做地理数据可视化、游戏地形生成或散点图领域划分时，d3-delaunay、delaunator和d3-voronoi是经常被摆在一起比较的三个名字。d3-delaunay 是一个快速计算二维点集 Voronoi 图（泰森多边形）的 JavaScript 库，它基于 Delaunator 构建三角剖分，再通过连接相邻三角形的外接圆圆心得到 Voronoi 图，是 D3 生态中处理这类几何问题的官方现代方案。这篇文章用最简单的方式，帮你搞清楚这三个库分别擅长什么、差异在哪，并给出实用的选型建议。🚀

一、先认识三个主角：Delaunay 三角剖分库的进化史

这三个库其实处于不同的"层级"，理解了这一点，选型难题就解决了一半。

delaunator：专注极致的底层三角剖分引擎

delaunator 是 Mapbox 团队出品的底层库，只做一件事：用扫描线算法（sweep algorithm）计算Delaunay 三角剖分。它输出的是triangles、halfedges等原始索引数据，性能极其出色，但"裸"得就像引擎零件——没有封装、没有渲染、也没有 Voronoi。

d3-voronoi：已经退役的 D3 官方旧插件

d3-voronoi是 D3 早年的官方插件，可以直接从点集生成 Voronoi 图。但随着 Delaunator 的出现，Mike Bostock 决定基于它重写更快的版本，d3-voronoi 从此停止维护，官网也明确建议用户迁移。新项目不要再选它，这是选型最重要的一条结论。

d3-delaunay：集大成者的现代方案

d3-delaunay正是上面说的"重写版本"。它以 delaunator 为底层依赖（见 package.json），对外提供Delaunay和Voronoi两个类，从三角剖分到 Voronoi 图一步到位，还内置了 SVG/Canvas 渲染能力。

二、一张图看懂：三角剖分与 Voronoi 图是"对偶关系"

很多新手困惑：Delaunay 和 Voronoi 到底啥关系？简单说，它们是彼此的对偶图：

• Delaunay 三角剖分：把点集连成互不交叉的三角形网格（保证每个三角形的外接圆内不含其他点）；
• Voronoi 图：把平面划分成多个多边形区域，每个区域内的点到其中心点的距离最近。

d3-delaunay 的高明之处在于：只要算出三角剖分，就能通过连接每个三角形的外接圆圆心自动得到 Voronoi 图，这一逻辑直接体现在 src/voronoi.js 的_init()方法中。所以选 delaunator 只能拿到一半（三角形），而 d3-delaunay 一次给全。

三、d3-delaunay 的核心优势：一步到位还自带渲染

如果你只想用一个库搞定所有事情，d3-delaunay 几乎是最省心的选择，它有三大杀手锏：

1. 从点集到 Voronoi 图只需两行代码

Delaunay.from(points)创建三角剖分，再调用.voronoi(bounds)就能拿到带边界的 Voronoi 对象，随后用cellPolygons()遍历所有单元格。入口就在 src/index.js 和 src/delaunay.js 中。

2. 内置渲染，无需额外绘图代码

render()、renderHull()、renderPoints()等方法可以直接输出 SVG path 字符串或绘制到 Canvas；Voronoi 侧也有renderCell()、renderBounds()对应的方法。做可视化 demo 时极其方便。

3. 支持增量更新

调用update()就能在点集变化后复用已有结构快速重算，适合做动态交互效果（如鼠标拖拽点、实时热力图）。

四、d3-delaunay vs delaunator：底层引擎与完整方案的对决

这是最实际的对比。如果你在纠结这两个，请对照下表：

结论：delaunator 适合你自己构建三角剖分之上的复杂逻辑（比如自研网格算法）；d3-delaunay 适合绝大多数业务场景，特别是同时需要三角剖分和 Voronoi 图时。

五、d3-delaunay vs d3-voronoi：为什么要"喜新厌旧"？

既然 d3-voronoi 也能生成 Voronoi 图，为什么官方要重写？

• 性能：基于 delaunator 的 d3-delaunay 在大量点（上万甚至十万级）的场景下明显更快；
• 功能：d3-delaunay 额外提供find()最近点查询、neighbors()邻居遍历、contains()点包含判断等实用方法；
• 维护：d3-voronoi 已进入停更状态，D3 官方文档明确推荐使用 d3-delaunay。

一句话总结：用新不用旧。

六、最终选型建议：按需求场景对号入座

不知道怎么选？直接按你的场景套用：

七、快速上手：10 行代码画出 Voronoi 图

最后给个直观的入门示例，感受一下 d3-delaunay 的简洁：

import {Delaunay} from "d3-delaunay"; const points = [[10, 20], [100, 60], [200, 120], [150, 250], [50, 300]]; const delaunay = Delaunay.from(points); const voronoi = delaunay.voronoi([0, 0, 300, 350]); // 逐个输出 Voronoi 单元格多边形 for (const cell of voronoi.cellPolygons()) { console.log(cell); // [[x0, y0], [x1, y1], ...] }

想深入了解实现细节，可以查看 src/delaunay.js 中Delaunay类的完整 API，以及 src/voronoi.js 中边界裁剪（_clip）与单元格渲染的实现，测试用例则在 test/delaunay-test.js 与 test/voronoi-test.js 中，是学习用法的绝佳范本。

总结：三角剖分与 Voronoi 图选型并不复杂——追求极简底层用 delaunator，追求省心全能直接上 d3-delaunay，而 d3-voronoi 则应果断放弃。希望这篇对比能帮你少踩坑，快速做出正确的技术决策！✨

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