The Delaunay.hull property returns an Int32Array of point indices that form the convex hull in the counterclockwise order. If the points are collinear, then it returns them ordered.
Syntax:
delaunay.hullParameters:
It takes nothing as the parameter.
Return Value:
This property returns an array.
Example 1: The below code example shows the use of the d3.delaunay.hull property.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></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.hull Property
</h3>
<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 hull = voronoi.delaunay.hull;
document.querySelector("#app").innerHTML =
`Convex Hull: ${JSON.stringify(hull)}`;
document.querySelector("#app").
appendChild(canvas);
</script>
</body>
</html>
Output:
.png)
Example 2: The below code uses the d3.Delaunay.hull property to render the Voronoi diagram and highlight the edges.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body style="text-align: center;">
<h1 style="text-align: center; color: green;">
GeeksforGeeks
</h1>
<h3 style="text-align: center;">
D3.js | Convex Hull
</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 hull =
delaunay.hullPolygon();
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 = "blue";
context.lineWidth = 2;
context.moveTo(hull[0][0], hull[0][1]);
for (const point of hull) {
context.lineTo(point[0], point[1]);
}
context.closePath();
context.stroke();
</script>
</body>
</html>
Output:
