D3.js Delaunay.from() Method

Last Updated : 08 Mar, 2024

The delaunay.from() method returns the Delaunay triangulation for the given array of points or the function that returns the points. This method takes an array of points and optional accessors for x and y coordinates. It returns a Delaunay object that provides various methods for working with triangulation, such as rendering points, accessing triangles, and computing the convex hull.

Syntax:

 delaunay.from(fx, fy)

Parameters:

fx: A function that returns the x-coordinate of a point.
fy: A function that returns the y-coordinate of a point.

Return Value:

It returns the Delaunay triangulation for the given array of points.

Example 1: This example shows the basic use of delaunay.from() method to create Delaunay triangulation.

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.from() 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));
        }
 
   
 
        document.querySelector("#app").appendChild(canvas);
    </script>
</body>
 
</html>

Output:

Screenshot-2024-03-01-220829

Example 2: This example explicitly uses d3.Delaunay.from() method to create the Delaunay triangulation from the set of random points.

HTML

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
 
<body>
  <h1 style="text-align: center; color: green;">
        GeeksforGeeks
      </h1>
  <h3 style="text-align: center;">
        D3.js | Delaunay From() Method
      </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";
 
 
    // Example Code
    const width = 600;
    const height = 400;
 
    // Generating a set of random points
    const points = Array
      .from({length: 50},
        () => [Math.random() * width, Math.random() * height]);
 
    const delaunay = d3.Delaunay.from(points);
 
    // Accessing the convex hull polygon
    const hull = delaunay.hullPolygon();
 
    // Creating a canvas
    const canvas = d3.select("#app")
      .append("canvas")
      .attr("width", width)
      .attr("height", height);
 
    const context = canvas
      .node().getContext("2d");
 
    // Render Delaunay triangulation
    context.beginPath();
    delaunay.renderPoints(context);
    context.fillStyle = "black";
    context.fill();
 
    // Render convex hull
    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>