d3-voronoi

这个模块实现了用来计算一组二维点 Voronoi diagram(泰森多边形) 或 Delaunay triangulation(德劳内三角剖分) 的 Steven J. Fortune’s algorithm 算法。这个模块的实现大多是基于 Raymond Hill 的工作。

泰森多边形不仅仅在视觉上具有吸引力，在交互方面也非常实用，比如在散点图中增加点的目标面积。参考 “Strikeouts on the Rise” 和 multi-line chart。也可以参考 Tovi Grossman’s 的关于关联技术的 bubble cursors 论文。泰森多边形也可以用来自动标记定位，德劳内网格在计算相邻域或视觉元素分组方面很有用。

Installing

NPM 安装: npm install d3-voronoi. 此外还可以下载 latest release. 可以直接从 d3js.org 以 standalone library 或作为 D3 4.0 的一部分载入. 支持 AMD, CommonJS, 以及基本的标签引入形式。如果使用标签引入则会暴露全局 d3 变量:

<script src="https://d3js.org/d3-voronoi.v1.min.js"></script>
<script>

var voronoi = d3.voronoi();

</script>

在浏览器中测试 d3-voronoi.

API Reference

# d3.voronoi() <源码>

使用默认的 x- 和 y- 访问器创建一个新的泰森多边形布局，并且 extent 为 null.

# voronoi(data) <源码>

根据指定的 data 点数组计算 Voronoi diagram.

# voronoi.x([x]) <源码>

如果指定了 x 则将 x 坐标访问器设置为指定的参数。如果没有指定 x 则返回当前的 x 坐标访问器，默认为:

function x(d) {
  return d[0];
}

# voronoi.y([y]) <源码>

如果指定了 y 则将 y 坐标访问器设置为指定的参数。如果没有指定 y 则返回当前的 y 坐标访问器，默认为:

function y(d) {
  return d[1];
}

# voronoi.extent([extent]) 源码<>

如果指定了 extent 则设置泰森多边形的裁剪范围为指定的范围并返回当前泰森多边形布局。extent 通过数组 [[x0, y0], [x1, y1]] 的形式指定，其中 x0 为左边界, y0 为上边界, x1 为右边界而 y1 为下边界。如果 extent 没有指定，则返回当前的裁剪范围，默认为 null。在使用 voronoi.polygons 时需要设置裁剪范围。

# voronoi.size([size]) 源码<>

当裁剪范围最小 x 和 y 为 ⟨0,0⟩ 时相当于 voronoi.extent 的别名。等价于:

voronoi.extent([[0, 0], size]);

# voronoi.polygons(data) 源码<>

返回一个稀疏的多边形数组，每个输入点对应一个多边形，相当于计算后的泰森多边形中的每一个多边形格子。等价于:

voronoi(data).polygons();

参考 diagram.polygons 获取更多信息. 注意: 需要设置 extent.

# voronoi.triangles(data) 源码<>

根据指定的 data 返回德劳内三角剖分之后的三角形数组。每个三角形的三个顶点都来自 data。等价于:

voronoi(data).triangles();

参考 diagram.triangles 获取更多细节.

# voronoi.links(data) 源码<>

返回对指定 data 的德劳内三角剖分的边数组，每个边包含 source 和 target 属性，并且都属于 data 中的某个元素。等价于:

voronoi(data).links();

参考 diagram.links 获取更多细节.

Voronoi Diagrams

# diagram <源码>

由 voronoi 计算返回的泰森多边形包含以下属性:

• edges - edges 数组.
• cells - cells 稀疏数组, 每个元素对应一个唯一的输入点.

如果输入数据中存在多个完全一样的输入点，则其中一个会被与 cell(单元) 关联，而其他的相同的则被丢失，但不影响 cells 数组的长度(稀疏数组)。

# diagram.polygons() 源码<>

返回一个稀疏的并且根据 extent 被裁剪的多边形数组，每个多边形都有一个对应的 cell(单元) (去重的稀疏单元)。每个多边形都由以个使用 [x, y] 组成的数组表示(二维数组)， 其中 x 和 y 表示多边形的定点。每个多边形二维数组包含一个 data 字段指向 data 中的对应元素。多边形是开放的: 不包含重复第一个的闭合点；例如，一个三角形是三个点的数组。多边形也是逆时针的，假设原点 ⟨0,0⟩ 在左上角。

对于输入数据中的重合点，其中一个点会被分配给多边形，而其他相同的点在返回的稀疏数组中丢失。

# diagram.triangles() 源码<>

根据指定的 data 返回德劳内三角剖分之后的三角形数组。每个三角形的三个定点都来自输入数据 data。由于三角剖分受 extent 的影响，最后返回的是德劳内三角剖分的子集。

# diagram.links() 源码<>

返回对指定 data 德劳内三角剖分后的边数组，边对应网格中的每一条边。每个边包含以下两个属性:

• source - source 节点，data 中的某个元素.
• target - target 节点，data 中的某个元素.

受 extent 的影响，最后返回的边数组是德劳内三角剖分后的边数组的子集。

# diagram.find(x, y[, radius]) 源码<>

返回距离点 [x, y] 最近的点。如果指定了 radius 则仅仅在指定半径范围内查找。

参考 Philippe Rivière 的 bl.ocks.org/1b7ddbcd71454d685d1259781968aefc 查看例子。

# cell

每个单元都是包含以下两个属性的对象:

• site - 与单元格关联的输入数据中的 site.
• halfedges - 一组 diagram.edges 的索引，表示单元格多边形的每条边.

# site

图中每个 site 都是一个 [x, y] 数组，并且包含以下两个属性:

• index - site 的索引，对应输入数据中相关数据的索引.
• data - 对应此 site 的输入数据.

# edge

每个边都被定义为 [[x0, y0], [x1, y1]]，并且包含以下两个属性:

• left - 边的左侧 site.
• right - 边的右侧 site; 如果为裁剪边，则为 null.