1. 什么是Voronoi图？
Voronoi图是一种用于描述空间数据分布的图形，它将空间划分为多个区域，每个区域内的数据点最近的邻居点是相同的。这种图形可以被用于众多领域，如地理信息系统、生物学以及图像处理等。在前端开发中，Voronoi图可以用于地图上的位置点聚类、模拟物理运动以及生成自然图形等。
2. npm包voronoi介绍
Voronoi是一个npm包，它是基于D3.js库的JavaScript实现，可以用于生成Voronoi图形。它适用于在前端开发中应用Voronoi图形，同时也具备简单易用、轻量级、维护性好等特点，非常适用于初学者或快速开发的项目。
3. 使用voronoi
安装
可以通过以下命令进行安装：
npm install voronoi
示例
通过以下代码可以生成一个简单的Voronoi图形：
-- -------------------- ---- ------- --- ------- - ------------------- --- ----- - ---- ------ - ---- --- ----- - ----------------------------- - ------ -------------- - ------ ------------- - -------- --- --- ------- - --- ---------- --- ------- - ---------------------- - --- -- --- ------ --- -- --- ------ ---
在这个示例中，我们首先设置了图形的宽和高，然后生成一组位置点作为Voronoi图形的基础。接着，我们调用Voronoi()方法生成一个实例，然后又调用compute()方法传入位置点和图形的边缘坐标。最后，我们可以通过调用diagram对象来访问图形的各种属性和方法。
API
下面是Voronoi的API列表：
- Voronoi()：构造函数返回一个新的Voronoi对象
- voronoi.compute(points, bbox)：计算并返回一个Delaunay图形和一个Voronoi图形。其中，
points是一个包含位置点的数组，bbox是指定的边缘坐标 - Diagram.edges： 一个包含Voronoi图形边缘的对象列表
- Diagram.cells： 一个包含Voronoi图形内部单元的对象列表
- Edge.lSite： 一个指向左侧单元实例的指针
- Edge.rSite： 一个指向右侧单元实例的指针
4. 用Voronoi构建物理连线
我们可以用Voronoi构建出相互牵连的物理连线，下面是一个比较简单的示例：
-- -------------------- ---- -------
--- ------ - ----- --- ------ --- ------- --- ----- ----
----- - --- - ----------- - -------------
------ - --- - ---------- - --------------
--- - - --
--- ------ - --------------------------- -
------ -------------- - ------ ------------- - --------
---
------- - ------------------------- ---------
----- - ----------------------
----- - -------------------------
--- ---- - - -- - - -- ---- -
--- -------- - --
-- -------------
-- ------------
---
--- ---- - - -- - - ------------- ---- -
-- ---------------------- -- -- -
---------------
-- -------------------
-- ------------------
--
- ---- -- ---------------------- -- -- -
---------------
-- -------------------
-- ------------------
--
-
-
-------------------
---------------
---------- ---------------
---------------- ----------
-------------- -------
---------------------- --
-在这个示例中，我们首先创建一个大小为(width, height)的 voronoi() 方法实例并利用传入的points（数组，包含 n 个点的坐标组）创建出储存每个单元的 polygons 变量和储存每个点的连线的 links 变量。然后通过一个嵌套的循环，对每个点构建出它的连线。在d3.js中，我们可以将每个连线组成一个由坐标点组成的数组，然后通过d3中的path元素来绘制成“线段”。最后将线段放在指定ID的svg元素（chart）中，通过选定的愿这些 svg元素填充颜色和样式。
通过Voronoi构建的物理连线，在前端开发中可以应用于模拟地理网格、网络拓扑结构等。
5. 总结
npm包Voronoi是一个非常实用且易学易用的Voronoi图形生成库，可以应用于前端开发中的众多领域。我们可以用其构建出纯粹的图形也可以将其应用于物理连线等更加复杂的领域。此外，Voronoi也具备维护性好、轻量级等优点，值得需要在前端开发领域中需要应用到Voronoi的人士使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/90366