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 字符串或绘制到 CanvasVoronoi 侧也有renderCell()、renderBounds()对应的方法。做可视化 demo 时极其方便。3. 支持增量更新调用update()就能在点集变化后复用已有结构快速重算适合做动态交互效果如鼠标拖拽点、实时热力图。四、d3-delaunay vs delaunator底层引擎与完整方案的对决这是最实际的对比。如果你在纠结这两个请对照下表对比维度delaunatord3-delaunay定位底层三角剖分引擎完整几何方案库Voronoi 图❌ 不支持✅ 原生支持渲染能力❌ 无✅ 支持 SVG/Canvas数据形式原始索引数组类封装 迭代器学习成本较高较低维护状态活跃活跃结论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。一句话总结用新不用旧。六、最终选型建议按需求场景对号入座不知道怎么选直接按你的场景套用你的需求推荐选择只要三角形网格、想自己写底层算法delaunator需要 Voronoi 图 渲染 交互d3-delaunay✅地理/气象/游戏地图可视化d3-delaunay✅旧项目维护正在用 d3-voronoi尽快迁移到 d3-delaunay追求极致性能的十万级以上点集delaunator或 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考