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>