<!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"
>
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
>