前言
d3node-voronoi 是一款基于 D3.js 的 npm 包，它主要用于生成 Voronoi 图形以及计算 Voronoi 剖分。Voronoi 剖分在前端数据可视化领域有着广泛的应用，比如空间分析、网格生成和生成酷炫的艺术效果等等。本篇文章将详细介绍如何使用 d3node-voronoi 这款 npm 包，帮助读者快速上手并实现自己的应用。
安装
首先，需要确保已经在本地安装了 Node.js（建议版本 v12 及以上）。在命令行中输入以下命令，安装 d3node-voronoi：
npm install d3node-voronoi
快速入门
d3node-voronoi 的使用非常简单。下面是一个简单的例子，来帮助读者快速上手。
-- -------------------- ---- -------
----- --- - -------------------------
----- - - ---- - - ---
----- ------- - -------------
------- ---- --- --- ----
------ -
---- ----- ---- ----- ---- -----
---- ----- ----- ----- ----- ----
-
--
--------------------上述代码首先使用 require 导入了 d3node-voronoi，接着定义了一个 500 * 500 的坐标系。随后，使用 d3n.voronoi() 函数计算给定点集 sites 的 Voronoi 剖分，其中 bounds 参数指定了坐标系的范围。最后，将计算得到的 Voronoi 剖分对象输出到控制台。
在浏览器中打开控制台，可以看到以下输出结果：
-- -------------------- ---- -------
-
------ -
- ----- ---- ----- ---------- --- --- ------- ---- ---- --
- ----- ---- ----- ---------- --- --- ------- ---- ---- --
- ----- ---- ----- ---------- --- --- ------- ---- ---- --
- ----- ---- ----- ---------- --- --- ------- ---- ---- --
- ----- ----- ----- ---------- --- --- ------- ----- ---- --
-
----- ----- -----
---------- --- ---
------- -------------------- ------
-
--
--------- -
-------------------- -------------------- -------------------- --------------------
-------------------- -------------------- ------------------- --------------------
------------------- -------------------- -------------------- --------------------
-------------------- -------------------- -------------------- --------------------
-------------------- -------------------- -------------------- --------------------
------------------- -------------------- ------------------- --------------------
----- ----- -------------------- -------------------- -------------------- -------------------
-------------------- ----- -------------------- ----- ------------------- --------------------
------------------- -------------------- ------------------- --------------------
------------------- -------------------- ---- ------------------- -------------------- --------------------
-------------------- -------------------- ------------------- --------------------
------------------- ----- ---- -------------------- ------------------- -------------------
-
-得到计算结果后，可以将它渲染到 svg 中。下面是一个简单的例子：
-- -------------------- ---- -------
------
---- ---------------
------- ---------------------------------------------
--------
----- ---- - --- -- --------- ------- ----
----- --- - -----------------
----- ---- - ----------------------
-----------------
--------------------
-------------- -------
---------------------
----------- - -- ------------
----------- - -- ------------
---------- --
-------------- ------
-------------------
---------- - -- -----------------------------
-------------- -------
---------------- --------
---------
-------这段代码使用 D3.js 渲染了前面例子中得到的 Voronoi 剖分结果。它首先选中了一个 id 为 svg 的空 svg 元素，然后使用数据绑定的方式将每一个 Voronoi cell 渲染成一个 group 元素。在每个 group 元素中，使用一个小圆点标记 Voronoi cell 的重心，并使用 path 元素画出 cell 的边界线。
API
d3node-voronoi 的主要 API 如下：
d3n.voronoi({ bounds, sites })
该函数用于计算 sites 的 Voronoi 剖分。其中 bounds 和 sites 为必需参数。
bounds 为一个二维数组，用于指定 Voronoi 剖分的画布大小和范围。比如 [[0, 0], [500, 500]] 表示画布大小为 500 * 500，左上角坐标为 (0, 0)，右下角坐标为 (500, 500)。
sites 为一个二维数组，用于指定 Voronoi 图形的点集。每个点都是一个长度为 2 的数组，表示该点在画布上的坐标。
该函数的返回值是含有 cells 和 vertices 两个属性的对象。
cells 为一个数组，每个元素是一个含有 site、halfedges 和 center 三个属性的对象。其中：
site 表示该 cell 对应的输入点的坐标。
halfedges 为一个数组，每个元素是一个 index，表示该 cell 的边界有关的 halfedge 的索引。
center 表示该 cell 的重心坐标。
vertices 为一个数组，每个元素是一个长度为 2 的数组，表示该 Voronoi 图形的顶点坐标。
d3n.diagram.voronoi(sites)
该函数和 d3n.voronoi({bounds, sites}) 的作用相同，不过它计算的 Voronoi 图形是无界的。
如果需要在无界的 Voronoi 图形中计算一个有界区域内的 Voronoi 图形，可以使用 clip 方法，例如：
const border = [ [0, 0], [400, 0], [400, 400], [0, 400] ] const voronoi = d3nDiagram.voronoi(sites).clip(border)
这样就得到了边界为 [0, 0] - [400, 400] 的 Voronoi 剖分。
结束语
本文介绍了 d3node-voronoi 这个 npm 包的基本用法，希望能对大家有所帮助。除了上文中介绍的函数外，d3node-voronoi 还提供了许多其他有用的工具函数和方法，读者可以参考官方文档进行学习和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601081e8991b448ddf5f