by Observable

外觀

Delaunay 三角剖分 ​

Delaunay 三角剖分是由 x 和 y 中的一組點形成的三角形網格。沒有點在任何三角形的圓內，這對於某些應用來說是一個很好的幾何屬性，並且傾向於避免「細長」三角形。Delaunay 三角剖分是 Voronoi 圖 的對偶。

new Delaunay(points) ​

原始碼 · 傳回給定平坦陣列 [x0, y0, x1, y1, …] 的 points 的 Delaunay 三角剖分。

js
const delaunay = new d3.Delaunay(Float64Array.of(0, 0, 0, 1, 1, 0, 1, 1));

給定的 points 可以是任何類陣列類型，但通常是 Float64Array。

delaunay.points ​

點的座標作為陣列 [x0, y0, x1, y1, …]。

delaunay.halfedges ​

半邊索引為 Int32Array [j0, j1, …]。對於每個索引 0 ≤ i < halfedges.length，有一個半邊從三角形頂點 j = halfedges[i] 到三角形頂點 i。等效地，這表示三角形 ⌊i / 3⌋ 鄰接於三角形 ⌊j / 3⌋。如果 j 為負數，則三角形 ⌊i / 3⌋ 是 凸包 上的一個外部三角形。例如，要渲染 Delaunay 三角剖分的內部邊緣

js
const {points, halfedges, triangles} = delaunay;
for (let i = 0, n = halfedges.length; i < n; ++i) {
  const j = halfedges[i];
  if (j < i) continue;
  const ti = triangles[i];
  const tj = triangles[j];
  context.moveTo(points[ti * 2], points[ti * 2 + 1]);
  context.lineTo(points[tj * 2], points[tj * 2 + 1]);
}

另請參閱 delaunay.render。

delaunay.hull ​

形成凸包的點索引的 Int32Array，按逆時針順序排列。如果點共線，則按順序返回它們。

另請參閱 delaunay.renderHull。

delaunay.triangles ​

三角形頂點索引為 Uint32Array [i0, j0, k0, i1, j1, k1, …]。每個連續的三個索引 i、j、k 形成一個逆時針三角形。三角形點的坐標可通過遍歷 delaunay.points 獲得。例如，要渲染三角形 i

js
const {points, triangles} = delaunay;
const t0 = triangles[i * 3 + 0];
const t1 = triangles[i * 3 + 1];
const t2 = triangles[i * 3 + 2];
context.moveTo(points[t0 * 2], points[t0 * 2 + 1]);
context.lineTo(points[t1 * 2], points[t1 * 2 + 1]);
context.lineTo(points[t2 * 2], points[t2 * 2 + 1]);
context.closePath();

另請參閱 delaunay.renderTriangle。

delaunay.inedges ​

輸入半邊索引為 Int32Array [e0, e1, e2, …]。對於每個點 i，inedges[i] 是輸入半邊的半邊索引 e。對於重合點，半邊索引為 -1；對於凸包上的點，輸入半邊在凸包上；對於其他點，輸入半邊的選擇是任意的。inedges 表可用于遍歷 Delaunay 三角剖分；另請參閱 delaunay.neighbors。

Delaunay.from(points, fx, fy, that) ​

提示

Delaunay.from 通常比 new Delaunay 慢，因為它需要將一個新的平面陣列的 xy 座標實體化。

原始碼 · 傳回給定陣列或 點 的可迭代的 Delaunay 三角剖分。如果未指定 fx 和 fy，則假設 點 是由數字組成的二元陣列陣列：[[x0, y0], [x1, y1], …]。

js
const delaunay = d3.Delaunay.from([[0, 0], [0, 1], [1, 0], [1, 1]]);

否則，fx 和 fy 是針對 點 陣列中的每個元素依序呼叫的函數，並且必須傳回每個點的 x 和 y 座標。

js
const delaunay = d3.Delaunay.from([{x: 0, y: 0}, {x: 0, y: 1}, {x: 1, y: 0}, {x: 1, y: 1}], (d) => d.x, (d) => d.y);

如果指定了 that，則會將函數 fx 和 fy 呼叫 that 作為 this。(請參閱 Array.from 以供參考。)

delaunay.find(x, y, i) ​

js
delaunay.find(0, 0) // -1

範例 · 原始碼 · 傳回與指定點 ⟨x, y⟩ 最接近的輸入點的索引。搜尋從指定的點 i 開始。如果未指定 i，則預設為零。

delaunay.neighbors(i) ​

js
delaunay.neighbors(-1) // []

原始碼 · 傳回指定點 i 的鄰近點索引的可迭代。如果 i 是重合點，則可迭代為空。

delaunay.render(context) ​

原始碼 · 將 Delaunay 三角剖分的邊緣渲染到指定的 context。指定的 context 必須實作 CanvasPathMethods API 中的 context.moveTo 和 context.lineTo 方法。如果未指定 context，則會傳回 SVG 路徑字串。

delaunay.renderHull(context) ​

原始碼 · 將 Delaunay 三角剖分的凸包渲染到指定的 context。指定的 context 必須實作 CanvasPathMethods API 中的 context.moveTo 和 context.lineTo 方法。如果未指定 context，則會傳回 SVG 路徑字串。

delaunay.renderTriangle(i, context) ​

原始碼 · 將 Delaunay 三角剖分的三角形 i 渲染到指定的 context。指定的 context 必須實作 CanvasPathMethods API 中的 context.moveTo、context.lineTo 和 context.closePath 方法。如果未指定 context，則會傳回 SVG 路徑字串。

delaunay.renderPoints(context, radius) ​

原始碼 · 將 Delaunay 三角剖分的輸入點渲染到指定的 context，並以指定的 radius 顯示為圓形。如果未指定 radius，則預設為 2。指定的 context 必須實作 CanvasPathMethods API 中的 context.moveTo 和 context.arc 方法。如果未指定 context，則會傳回 SVG 路徑字串。

delaunay.hullPolygon() ​

原始碼 · 傳回表示凸包的封閉多邊形 [[x0, y0], [x1, y1], …, [x0, y0]]。另請參閱 delaunay.renderHull。

delaunay.trianglePolygons() ​

原始碼 · 傳回 每個三角形的 polygon 的可迭代物件，依順序排列。另請參閱 delaunay.renderTriangle。

delaunay.trianglePolygon(i) ​

原始碼 · 傳回表示三角形 i 的封閉多邊形 [[x0, y0], [x1, y1], [x2, y2], [x0, y0]]。另請參閱 delaunay.renderTriangle。

delaunay.update() ​

原始碼 · 在點已原地修改後重新計算三角剖分。

delaunay.voronoi(bounds) ​

原始碼 · 傳回給定 Delaunay 三角剖分的 Voronoi 圖。在渲染時，圖形將裁剪到指定的 bounds = [xmin, ymin, xmax, ymax]。

js
const delaunay = d3.Delaunay.from(points);
const voronoi = delaunay.voronoi([0, 0, 640, 480]);

如果未指定 bounds，它會預設為 [0, 0, 960, 500]。即使在沒有三角剖分的簡化情況下，也會傳回 Voronoi 圖，也就是 0、1 或 2 個點，以及共線點。