什么是 d3-delaunay？
d3-delaunay 是一个 JavaScript 库，它提供了 Delaunay 三角剖分算法的实现。Delaunay 三角剖分是一种基于点集的分割方式，被广泛应用于计算机图形学、模拟、优化等领域。在前端领域，Delaunay 三角剖分也被用来实现一些比较酷的效果，例如点云渲染、热力图等，d3-delaunay 就是一个比较好用的实现库。
安装
d3-delaunay 是一个 npm 包，可以通过 npm 安装：
npm install d3-delaunay
也可以通过.jsdelivr.net（一个免费的 CDN 服务）来引入：
<script src="https://cdn.jsdelivr.net/npm/d3-delaunay@6.1.1/dist/d3-delaunay.min.js"></script>
使用
基础用法
使用 d3-delaunay 前，需要先获取到一组点（Point Set）。每个点可以是一个数组，数组的第一项是 X 坐标，第二项是 Y 坐标。以下是一个简单的例子：
const points = [ [10, 10], [20, 20], [30, 30], [40, 40], [50, 50], ];
得到点集后，可以使用 d3-delaunay 库的 Delaunay 方法来进行三角剖分：
const delaunay = Delaunay.from(points); const voronoi = delaunay.voronoi([0, 0, 600, 400]); // 创建一个 Voronoi 图形对象
这里我们使用 Voronoi 图形来展示三角剖分的结果。Voronoi 图形是一个基于点集的分割方式，和 Delaunay 三角剖分相对应，它将平面分割成一系列多边形，这些多边形的顶点就是点集中的点。使用 delaunay.voronoi() 方法可以创建一个 Voronoi 图形对象。这里传入的 [0, 0, 600, 400] 用来限制 Voronoi 图形的尺寸。
得到 Voronoi 图形对象后，我们可以使用它的方法来获取三角形顶点坐标和多边形顶点坐标：
const triangles = delaunay.triangles(); // 获取三角形顶点坐标 const polygons = voronoi.cellPolygons(); // 获取 Voronoi 多边形顶点坐标
得到三角形顶点和多边形顶点后，我们可以使用它们来绘制三角形和 Voronoi 图形：
-- -------------------- ---- -------
-- -----
--------------------
------------------- -- -
------------------------------- -----------------
------------------------------- -----------------
------------------------------- -----------------
--------------------
---
------------------- - -------
-----------------
-- -- ------- -----------
--------------------
------------------------ -- -
------------------- -- -- -
-- -- --- -- -
-------------------- ------
- ---- -
-------------------- ------
-
---
--------------------
----------------- - --------------------- - -------------------- - -------------------- - -----------
---------------
-----------------
---其他用法
除了上面的基础用法之外，d3-delaunay 还提供了其他一些常用的方法，例如：
delaunay.neighborIds(i)
获取点 i 的相邻点的编号。
const neighborIds = delaunay.neighborIds(0);
delaunay.neighbors(i)
获取点 i 的相邻点的坐标。
const neighbors = delaunay.neighbors(0).map(id => points[id]);
delaunay.find(x, y, i)
查找最接近点 (x, y) 的点在 points 数组中的编号。可以通过 i 参数指定从哪个三角形开始查找。
const id = delaunay.find(25, 25);
示例
下面是一个完整的示例，展示如何使用 d3-delaunay 实现点云渲染效果。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------------ --------------
-------
------ -
-------- ------
------- - -----
-
--------
-------
------
------- ----------- ----------------------
------- --------------------------------------------------------------------------------------
--------
----- ------ - ---------------------------------
----- ------- - ------------------------
----- ----- - -------------
----- ------ - --------------
----- ----- - ----- -- ----
----- ------- - --------------- ------- - ----------------- -- ------
----- ------ - ------------ ------- ----- -- --- -- -- -
-- - ------ - --------- - ------- - ------- - --
------------ - ------ - --------- - ------- - ------- - --
---
----- -------- - ----------------------
----- ------- - -------------------- -- ------ ---------
-- -- ------- --
----- -------- - -----------------------
--------------------
------------------------ -- -
------------------- -- -- -
-- -- --- -- -
-------------------- ------
- ---- -
-------------------- ------
-
---
--------------------
----------------- - --------------------- - -------------------- - -------------------- - -----------
---------------
-----------------
---
-- ---
----------------- - -------
---------------- -- ---------------------- ----- -- ----
---------
-------
-------总结
通过学习本篇文章，我们了解了 d3-delaunay 这个 npm 包的使用方法。d3-delaunay 可以方便地进行 Delaunay 三角剖分，并提供了一些常用的方法来实现一些比较酷的效果，例如点云渲染、热力图等。学习了 d3-delaunay 之后，我们可以在自己的项目中应用它，提高开发效率和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eeef9baefcef77a054b7545