D3.js Delaunay.find() Method
Last Updated :
07 Mar, 2024
D3.js is a strong JavaScript framework for data visualization, and one of its modules, Delaunay, supports Delaunay triangulation. The delaunay.find() method returns the index of the input point that is closest to the specified point (x, y).
Syntax:
delaunay.find(x, y[, i])
Parameters:
- x: The x-coordinate of the point where you want to find the index point.
- y: The y-coordinate of the point where you want to find the index point.
- i (optional): It is an optional parameter indicating a starting triangle index for the search. If provided, the search begins from the specified triangle index.
Return Value:
The index of the Delaunay triangle contains the specified point (x, y).
Example: This example shows the use of delaunay.find() method.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="
https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<h1 style="text-align: center; color:
green;">GeeksforGeeks</h1>
<h3 style="text-align: center;">
D3.js | d3.Delaunay.find() Method</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;
// Generating a set of random points
const data = Array(50) // Reduced number of points
.fill()
.map((_, i) => ({
x: (i * canvasWidth) / 50,
y: Math.random() * canvasHeight
}));
// Creating a Delaunay triangulation from the data
const voronoi = d3.Delaunay.from(
data,
(d) => d.x,
(d) => d.y
).voronoi([0, 0, canvasWidth, canvasHeight]);
// Clearing the canvas
context.clearRect(0, 0, canvasWidth, canvasHeight);
// Rendering the Delaunay points on the canvas
context.fillStyle = "black";
context.beginPath();
voronoi.delaunay.renderPoints(context, 1);
context.fill();
// Styling the Voronoi diagram
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));
}
// Using the find() method to locate
// the Delaunay triangle for the point (2, 3)
const findResult = voronoi.delaunay.find(2, 3);
// Displaying the result on the HTML page
document.querySelector("#app").innerHTML =
`Index of Delaunay Triangle
containing (2, 3): ${findResult}`;
document.querySelector("#app").appendChild(canvas);
</script>
</body>
</html>