The Delaunay.halfedges property returns the half-edge indices as an Int32Array [j0, j1, …]. For every index value between 0 and the length of the half-edges array (exclusive), there is a connection from a vertex of a triangle to another vertex.
Syntax:
delaunay.halfedges
Parameters:
It takes nothing as the parameter.
Return Value:
This property returns an array pointing to the indices of the half-edges.
Example 1: The below code example shows the use of the d3.delaunay.halfedges property.
<!DOCTYPE html> < html >
< head >
< meta charset = "utf-8" >
< script src =
</ script >
</ head >
< body style = "text-align: center;" >
< h1 style = "text-align: center; color: green;" >
GeeksforGeeks
</ h1 >
< h3 style = "text-align: center;" >
D3.js | d3.Delaunay.halfedges Property
</ h3 >
< p id = "result" ></ p >
< div id = "app" style=
"text-align: center;
margin-top: 20px;
font-size: 18px;">
</ div >
< script type = "module" >
import * as d3 from "https://cdn.skypack.dev/d3@7";
const canvasWidth = 400;
const canvasHeight = 300;
const canvas =
document.createElement("canvas");
const context = canvas.getContext("2d");
canvas.width = canvasWidth;
canvas.height = canvasHeight;
const data = Array(50).fill()
.map((_, i) => ({
x: (i * canvasWidth) / 50,
y: Math.random() * canvasHeight
}));
const voronoi = d3.Delaunay.from(
data,
(d) => d.x,
(d) => d.y
).voronoi([0, 0, canvasWidth, canvasHeight]);
context.clearRect(0, 0, canvasWidth, canvasHeight);
context.fillStyle = "black";
context.beginPath();
voronoi.delaunay.renderPoints(context, 1);
context.fill();
context.lineWidth = 1.5;
const segments =
voronoi.render().split(/M/).slice(1);
for (const e of segments) {
context.beginPath();
context.strokeStyle =
d3.hsl(360 * Math.random(), 0.7, 0.5);
context.stroke(new Path2D("M" + e));
}
const halfedges =
voronoi.delaunay.halfedges;
document.querySelector("#result").innerHTML =
`Halfedges: ${halfedges}
Number of Halfedges: ${halfedges.length}`;
document.querySelector("#app").
appendChild(canvas);
</ script >
</ body >
</ html >
|
Output:
Example 2: The below code uses the d3.Delaunay.halfedges property to render the Voronoi diagram and highlight the edges.
<!DOCTYPE html> < html >
< head >
< meta charset = "utf-8" >
</ head >
< body style = "text-align: center;" >
< h1 style = "text-align: center; color: green;" >
GeeksforGeeks
</ h1 >
< h3 style = "text-align: center;" >
D3.js | Voronoi Diagram with Halfedges
</ h3 >
< div id = "app" style=
"text-align: center;
margin-top: 20px;">
</ div >
< script type = "module" >
import * as d3 from "https://cdn.skypack.dev/d3@7";
const width = 600;
const height = 400;
const points = Array.from({ length: 50 },
() => [Math.random() * width,
Math.random() * height]);
const delaunay =
d3.Delaunay.from(points);
const voronoi =
delaunay.voronoi([0, 0, width, height]);
const canvas = d3.select("#app")
.append("canvas")
.attr("width", width)
.attr("height", height);
const context =
canvas.node().getContext("2d");
context.beginPath();
delaunay.renderPoints(context);
context.fillStyle = "black";
context.fill();
context.beginPath();
context.strokeStyle = "gray";
voronoi.renderBounds(context);
context.stroke();
const halfedges = delaunay.halfedges;
for (let i = 0; i < halfedges.length ; ++i) {
const j = halfedges [i];
if (j !== -1) {
const p0 =
points [delaunay.triangles[Math.floor(i / 3)]];
const p1 =
points [delaunay.triangles[Math.floor((i + 1) / 3)]];
const p2 =
points [delaunay.triangles[Math.floor((i + 2) / 3)]];
const e = delaunay .edges[i];
context.moveTo(p0[0], p0[1]);
context.lineTo(p1[0], p1[1]);
context.lineTo(p2[0], p2[1]);
context.closePath();
context.stroke();
}
}
</script>
</ body >
</ html >
|
Output: