d3-delaunay 快速开始10 分钟绘制你的第一个 Voronoi 图【免费下载链接】d3-delaunayCompute the Voronoi diagram of a set of two-dimensional points.项目地址: https://gitcode.com/gh_mirrors/d3/d3-delaunay想快速上手Voronoi 图绘制却不知道从何下手d3-delaunay是 D3 生态中专门用于计算二维点集 Voronoi 图的高性能 JavaScript 库它基于 Delaunator 先完成 Delaunay 三角剖分再连接相邻三角形的外接圆心从而生成漂亮的 Voronoi 图。无论你是数据可视化新手还是想为作品加点几何创意这篇d3-delaunay 快速开始教程都能带你用 10 分钟画出第一张属于自己的 Voronoi 图并掌握核心 API 的用法。什么是 Voronoi 图Voronoi 图泰森多边形是把平面按离哪个点最近划分成若干个区域的几何结构每个种子点拥有一块区域区域内任意位置到该点的距离都小于到其他点的距离。它广泛应用于气象插值、路径规划、游戏地图和艺术创作。d3-delaunay 的核心思路很清晰先用 Delaunay 三角剖分把点连成最优三角形网格再取每个三角形外接圆的圆心连成多边形就得到了 Voronoi 图。三步快速安装 d3-delaunay第一步安装依赖。在项目目录执行npm install d3-delaunay它本身依赖delaunator做三角剖分npm 会自动装好。如果你更习惯直接使用源码也可以 clone 仓库地址https://gitcode.com/gh_mirrors/d3/d3-delaunay后在本地运行。第二步引入模块。d3-delaunay 是标准 ES Module 包package.json中main指向 src/index.js统一导出Delaunay和Voronoi两个类见 src/index.js按需引入即可import {Delaunay} from d3-delaunay;第三步准备点集。点数据是一个二维坐标数组例如[[x0, y0], [x1, y1], ...]也可以用迭代器配合fx、fy提取自定义对象里的坐标。10 分钟绘制第一个 Voronoi 图最快配置方法第 1 步生成三角剖分用Delaunay.from(points)一次性完成点集解析与三角剖分返回的delaunay对象里已经包含triangles三角形顶点索引、halfedges半边和hull凸包等结构。第 2 步创建 Voronoi 图调用delaunay.voronoi([xmin, ymin, xmax, ymax])实现见 src/delaunay.js即可得到 Voronoi 图对象四个参数定义了裁剪边界不传时默认是[0, 0, 960, 500]。第 3 步渲染到画布最省事的做法是直接把voronoi.render(context)见 src/voronoi.js的输出丢给 canvas 2D 上下文整张图 3 行代码搞定const points Array.from({length: 100}, () [Math.random() * 960, Math.random() * 500]); const delaunay Delaunay.from(points); const voronoi delaunay.voronoi([0, 0, 960, 500]); voronoi.render(ctx); // ctx 是 canvas 2D 上下文核心 API 一览渲染与多边形提取voronoi.renderCell(i, ctx)只渲染第 i 个种子点的单元格见 src/voronoi.js适合逐个着色voronoi.cellPolygons()以生成器形式返回所有单元格的多边形坐标见 src/voronoi.js方便自己做填充、描边或统计voronoi.contains(i, x, y)判断某坐标是否属于第 i 个单元见 src/voronoi.js可用于鼠标悬停交互delaunay.renderPoints(ctx)绘制种子点调节点大小实现点阵艺术效果见 src/delaunay.js。这些方法的边界情况处理相当完善比如退化三角形、重合点等相关测试覆盖可参考 test/voronoi-test.js 和 test/delaunay-test.js。进阶玩法让 Voronoi 图更好看光谱着色遍历cellPolygons()给每个区域填充不同的颜色立刻得到渐变光谱般的视觉效果非常适合做数据区域分布的可视化。动态更新修改点坐标后调用voronoi.update()见 src/voronoi.js即可增量重建无需重新创建对象做动画时性能依然流畅。Delaunay 图本身delaunay.render(ctx)能直接画出三角剖分网格delaunay.renderHull(ctx)则输出凸包轮廓见 src/delaunay.js两者常配合 Voronoi 图一起展示。真实应用从数据可视化到艺术创作Voronoi 图的想象空间远超你的预期。最常见的是空间分布可视化例如把城市点位划分成势力范围、展示基站覆盖区域进阶玩法是用 Voronoi 区域拼接出人物肖像或艺术海报每个多边形填充照片对应位置的颜色就能得到极具设计感的马赛克画像。写在最后10 分钟里你已经完成了从安装、剖分、建图到渲染的全流程。d3-delaunay 的 API 设计简洁、性能优秀是 JavaScript 里绘制 Voronoi 图的首选方案。下一步不妨试试结合 canvas 事件做鼠标交互或把update()用在动画帧里让点集动起来——你会发现几何之美离你只有几行代码的距离。【免费下载链接】d3-delaunayCompute the Voronoi diagram of a set of two-dimensional points.项目地址: https://gitcode.com/gh_mirrors/d3/d3-delaunay创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考