d3-delaunay 核心组件详解一Delaunay 类的 10 个实用方法【免费下载链接】d3-delaunayCompute the Voronoi diagram of a set of two-dimensional points.项目地址: https://gitcode.com/gh_mirrors/d3/d3-delaunayd3-delaunay 是一个基于 Delaunator 构建的 JavaScript 计算几何库专门为二维点集快速计算 Delaunay 三角剖分与 Voronoi 图。在这个库的两个核心组件中Delaunay 类承担了三角剖分的构建、空间查询、几何提取与渲染等全部核心职责是学习 d3-delaunay 的第一道门槛。本文面向新手为你梳理 Delaunay 类最常用的 10 个实用方法从创建点集、更新数据、邻接查询到渲染网格与提取多边形坐标配合图示与极简示例助你用最少的代码快速做出几何可视化效果。快速认识 Delaunay 类核心数据结构一览Delaunay 类实例通常由静态方法Delaunay.from()创建其内部数据全部保存在几个高性能类型化数组中见 src/delaunay.js。理解这些属性后面的方法用起来会事半功倍属性类型含义pointsFloat64Array扁平化点坐标[x0, y0, x1, y1, …]trianglesUint32Array每个三角形的 3 个顶点索引每 3 个一组halfedgesInt32Array半边结构用于快速遍历相邻三角形hullUint32Array凸包顶点索引按逆时针顺序排列inedgesInt32Array每个点对应的入半边索引这些数据结构的完整实现位于 src/delaunay.js对应的测试用例则集中在 test/delaunay-test.js想要深入源码的读者可以对照阅读。创建与更新让点集动起来方法 1Delaunay.from() —— 一行代码构建三角剖分Delaunay.from()是使用频率最高的静态方法它能从多种数据源一步构建三角剖分const delaunay Delaunay.from(points); // 二维数组 const delaunay Delaunay.from(geo, d d.x, d d.y); // 对象数组 坐标访问器 const delaunay Delaunay.from(iterable, fx, fy); // 任意可迭代对象第二个和第三个参数是可选的坐标访问器源码见 src/delaunay.js当你的数据不是[x, y]形式而是对象、GeoJSON 或其他结构时无需预处理直接传入取值函数即可非常省事。方法 2update() —— 点集变化后的增量更新在动态可视化如粒子动画、实时数据流中点坐标会频繁变化。此时可以直接修改delaunay.points中的数值再调用update()让三角剖分同步刷新源码见 src/delaunay.jsdelaunay.points[i] newX; delaunay.points[i 1] newY; delaunay.update();update()会复用内部已有的 Delaunator 结构做增量重建比每次Delaunay.from()全量重算快得多是打造 60fps 粒子动画的关键技巧。对应的性能测试可以参考 test/delaunay-test.js。空间查询让数据可被检索方法 3neighbors(i) —— 快速获取某点的所有相邻点neighbors(i)是一个生成器方法源码见 src/delaunay.js它会按顺序产出与第i个点共享三角形边界的全部相邻点索引。这在构建图结构、寻找邻域、实现最近邻聚簇时非常有用for (const j of delaunay.neighbors(3)) { console.log(点 3 的邻居, j); }方法 4find(x, y) —— 定位离任意坐标最近的点find(x, y)是交互场景鼠标悬停、点击拾取中最常用的方法源码见 src/delaunay.js。它利用半边结构沿三角形逐步逼近目标位置返回距离(x, y)最近的点的索引查找速度远快于暴力遍历const idx delaunay.find(mouseX, mouseY); if (idx 0) highlight(idx);对于数十万量级的散点图悬停高亮这个方法也能保持流畅。它还支持第三个参数指定搜索起点便于在局部区域重复查询。渲染三件套把几何画出来Delaunay 类内置了轻量渲染能力不传 context 时返回 SVG 路径字符串传入 Canvas 2D 或自定义 context 时则直接绘制内部实现见 src/path.js。方法 5render() —— 绘制完整的三角剖分网格render()会把所有三角形边连同凸包一起画出来一条语句即可得到完整的剖分网格源码见 src/delaunay.jsconst svgPath delaunay.render(); // 得到 SVG path 字符串 delaunay.render(ctx); // 或直接画到 Canvas方法 6renderPoints() —— 绘制散点renderPoints(context, r)以指定半径r在每一点处画圆源码见 src/delaunay.js默认半径 2 像素。它可以单独用于展示原始点集也可以叠加在网格之上形成点 线的经典可视化。方法 7renderHull() —— 绘制凸包边界renderHull(context)只绘制凸包外轮廓用于快速勾勒点集的整体形状源码见 src/delaunay.js凸包非常适合做轮廓强调先画一层半透明凸包再叠加三角网格视觉层次立刻分明。几何提取直接拿到可复用的坐标如果说 render 系列是画出来那么 polygon 系列就是取出来——直接返回可参与进一步计算的坐标数组。方法 8hullPolygon() —— 获取凸包多边形坐标hullPolygon()返回凸包的顶点坐标数组[x0, y0, x1, y1, …]源码见 src/delaunay.js配合 D3 的d3.polygonArea()等方法可以计算凸包面积、质心等指标。方法 9trianglePolygon(i) —— 提取单个三角形trianglePolygon(i)返回第i个三角形的三个顶点坐标源码见 src/delaunay.js。配合renderTriangle(i, context)src/delaunay.js可以单独高亮或填充任意一个三角形非常适合做点击某个网格单元的交互。方法 10trianglePolygons() —— 批量提取全部三角形trianglePolygons()是一个生成器逐个产出所有三角形的多边形坐标源码见 src/delaunay.js是有限元着色、热力图映射的利器。每个三角形按自身属性高度、密度、距离等映射到不同颜色就能生成下面这种漂亮的颜色映射图延伸必学voronoi() 一键连接 Voronoi 图严格来说这是 Delaunay 类之外的第 11 个入口但因为它是通往另一个核心组件 Voronoi 类的唯一通道必须提前掌握。voronoi(bounds)传入[xmin, ymin, xmax, ymax]边界数组即可生成对应的 Voronoi 图对象源码见 src/delaunay.jsVoronoi 类实现在 src/voronoi.jsconst voronoi delaunay.voronoi([0, 0, 960, 500]);Delaunay 三角剖分与 Voronoi 图是一对几何对偶把每个三角形的外接圆圆心相连就得到 Voronoi 单元。掌握了voronoi()就为下一篇文章《Voronoi 类的实用方法》做好了铺垫。总结一张表记住 Delaunay 类的实用方法方法一句话用途场景举例Delaunay.from()从任意数据构建三角剖分项目起步update()点集变化后增量更新粒子动画neighbors(i)获取相邻点索引图结构、邻域分析find(x, y)查找最近点鼠标悬停拾取render()渲染三角网格网格可视化renderPoints()渲染散点点集展示renderHull()渲染凸包轮廓轮廓强调hullPolygon()提取凸包坐标面积与质心计算trianglePolygon(i)提取单个三角形单元高亮交互trianglePolygons()批量提取全部三角形颜色映射、热力图voronoi(bounds)延伸生成 Voronoi 图区域划分、泰森多边形从创建到查询、从渲染到提取Delaunay 类的这 10 个实用方法已经覆盖了大多数日常开发场景。下一篇我们将继续深入 Voronoi 类的cellPolygons、contains等核心方法敬请期待。【免费下载链接】d3-delaunayCompute the Voronoi diagram of a set of two-dimensional points.项目地址: https://gitcode.com/gh_mirrors/d3/d3-delaunay创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考