d3-delaunay 完全指南Voronoi 图与德劳内三角剖分究竟能做什么【免费下载链接】d3-delaunayCompute the Voronoi diagram of a set of two-dimensional points.项目地址: https://gitcode.com/gh_mirrors/d3/d3-delaunayd3-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 最常见的几类真实应用场景最近邻与区域归属快递站覆盖、外卖配送范围、移动基站选址本质都是每个点负责哪片区域用voronoi.contains一查便知。地图与地形网格从高程采样点生成 Delaunay 三角网TIN可做三维地形渲染、等高线生成和路径规划。游戏与物理模拟用 Voronoi 图划分领地区域、生成随机地图或为多智能体做空间分区避免全量两两比较。创意视觉与艺术生成将照片按 Voronoi 单元着色可以做出令人惊艳的多边形马赛克艺术效果下图的肖像正是典型玩法。网格生成与有限元分析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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考