D3.js Delaunay.halfedges Property

Last Updated : 07 Mar, 2024

The Delaunay.halfedges property returns the half-edge indices as an Int32Array [j0, j1, …]. For every index value between 0 and the length of the half-edges array (exclusive), there is a connection from a vertex of a triangle to another vertex.

Syntax:

delaunay.halfedges

Parameters:

It takes nothing as the parameter.

Return Value:

This property returns an array pointing to the indices of the half-edges.

Example 1: The below code example shows the use of the d3.delaunay.halfedges property.

HTML

<!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.halfedges Property
    </h3>
    <p id="result"></p>

    <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 halfedges = 
            voronoi.delaunay.halfedges;
        document.querySelector("#result").innerHTML =
            `Halfedges: ${halfedges}
            Number of Halfedges: ${halfedges.length}`;

        document.querySelector("#app").
            appendChild(canvas);
    </script>
</body>

</html>

Output:

D3SS

Example 2: The below code uses the d3.Delaunay.halfedges property to render the Voronoi diagram and highlight the edges.

HTML

<!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 | Voronoi Diagram with Halfedges
    </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 voronoi = 
            delaunay.voronoi([0, 0, width, height]);

        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 = "gray";
        voronoi.renderBounds(context);
        context.stroke();

        const halfedges = delaunay.halfedges;
        for (let i = 0; i < halfedges.length; ++i) {
            const j = halfedges[i];
            if (j !== -1) {
                const p0 = 
                    points[delaunay.triangles[Math.floor(i / 3)]];
                const p1 = 
                    points[delaunay.triangles[Math.floor((i + 1) / 3)]];
                const p2 = 
                    points[delaunay.triangles[Math.floor((i + 2) / 3)]];
                const e = delaunay.edges[i];
                context.moveTo(p0[0], p0[1]);
                context.lineTo(p1[0], p1[1]);
                context.lineTo(p2[0], p2[1]);
                context.closePath();
                context.stroke();
            }
        }
    </script>
</body>

</html>

D3.js Delaunay.halfedges Property

Syntax:

Parameters:

Return Value:

Similar Reads

d3-axis

d3-chord

d3-color

d3-interpolate

d3-contour

d3-delaunay

d3-hierarchy

d3-scale

d3-scale-chromatic

Thank You!

What kind of Experience do you want to share?