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.
<!DOCTYPE html> < html >
< head >
< meta charset = "utf-8" >
< script src="
</ 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:
Example 2: This example explicitly uses d3.Delaunay.from() method to create the Delaunay triangulation from the set of random points.
<!DOCTYPE html> < html >
< head >
< meta charset = "utf-8" >
</ 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 >
|
Output: