D3.js voronoi.extent() Function

Last Updated : 30 Sep, 2020

The voronoi.extent() function is used to set the extent of the Voronoi generator function. The given extent value is used to set the clip extent of the Voronoi layout within the given bounds. The bounds are given as a 2-d array that looks like [[x0, y0], [x1, y1]]. If the extent is not specified then it returns the current clip extent whose default value is null.

Syntax:

d3.voronoi().extent([extent]);

Parameters: This function takes one parameter as given above and described below.

extent: It tells about the area to be clipped. It takes value in the form of 2-D array.

Return Value: This function does not return anything.

Note: Please create a "data.csv" file. The data for the file is given in the below code.

Below given are a few examples of the Voronoi.extent() function.

Example 1:

HTML

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content=" 
        width=device-width, initial-scale=1.0"> 

    <script type="text/javascript"
        src="https://d3js.org/d3.v4.min.js"> 
    </script>
    <script src="https://d3js.org/d3-voronoi.v1.min.js">
    </script>
</head> 

<body> 
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3 style="color:green">voronoi.extent()</h3>
    
    <script> 
        d3.csv("data.csv", function(error, data){
            var svg = d3.select("body")
                        .append("svg")
                        .attr("height", 400)
                        .attr("width", 400)
                        .append("g")
                        .attr("transform", 
                     "translate(" + 20 + ", " + -20 + ")");

            var y = d3.scaleLinear()
                      .domain([2, 20])
                      .range([400, 0]);
            var x = d3.scaleLinear()
                      .domain([2, 15])
                      .range([0, 400]);
            svg.append("g")
                    .call(d3.axisLeft(y));

            svg.append("g")
                    .attr("transform", 
                     "translate(0, " + 400 + ")")
                    .call(d3.axisBottom(x));
            var voronoi = d3.voronoi()
                        .x(function(d) { return x(d.x); });
                  voronoi.y(function(d) { return y(d.y); })
                // Setting the extent using voronoi.extent() 
                .extent([[50, 50], [300, 300]]);
                    
            svg.append("g").selectAll("path")
                .data(voronoi(data).polygons())
                .enter()
                .append("path")
                .attr("d", (d)=>{ return d ? 
                ("M" + d.join("L") + "Z") : null; })
                .attr("fill", "none")
                .attr("stroke", "black");
        });

        // Data for CSV file
        // x, y, group
        // 45, 4.4, H
        // 9.1, 4.4, H
        // 9.9, 9.9, H
        // 4.45, 9.6, H
        // 4, 7.6, H
        // 9, 45, H
        // 4, 9.7, H
        // 9.7, 4.7, H
        // 9.9, 4.5, H
        // 4, 4.5, H
        // 7.9, 9, H
        // 9.9, 45, H
        // 9, 4.4, H
    </script> 
</body>
</html>

Output:

Example 2:

HTML

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content=" 
        width=device-width, initial-scale=1.0"> 

    <script type="text/javascript"
        src="https://d3js.org/d3.v4.min.js"> 
    </script>
    <script src="https://d3js.org/d3-voronoi.v1.min.js">
    </script>
</head> 

<body> 
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3 style="color:green">voronoi.extent()</h3>
    
    <script> 
        d3.csv("data.csv", function(error, data){
            var svg = d3.select("body")
                        .append("svg")
                        .attr("height", 400)
                        .attr("width", 400)
                        .append("g")
                        .attr("transform", "translate
                        (" + 20 + ", " + -20 + ")");

            var y = d3.scaleLinear()
                      .domain([2, 20])
                      .range([400, 0]);
            var x = d3.scaleLinear()
                      .domain([2, 15])
                      .range([0, 400]);
            svg.append("g")
                    .call(d3.axisLeft(y));

            svg.append("g")
                    .attr("transform", "translate(0, " + 400 + ")")
                    .call(d3.axisBottom(x));


            var voronoi = d3.voronoi()
                            .x(function(d) { return x(d.x); });
                voronoi.y(function(d) { return y(d.y); })
                // Setting the extent using voronoi.extent() function 
                .extent([[0, 50], [250, 380]]);
                    
            svg.append("g").selectAll("path")
                .data(voronoi(data).polygons())
                .enter()
                .append("path")
                .attr("d", (d)=>{ return d ? ("M" + d.join("L") + "Z") : null; })
                .attr("fill", "green")
                .attr("stroke", "black");
        });

        // Data for CSV file
        // x, y, group
        // 45, 4.4, H
        // 9.1, 4.4, H
        // 9.9, 9.9, H
        // 4.45, 9.6, H
        // 4, 7.6, H
        // 9, 45, H
        // 4, 9.7, H
        // 9.7, 4.7, H
        // 9.9, 4.5, H
        // 4, 4.5, H
        // 7.9, 9, H
        // 9.9, 45, H
        // 9, 4.4, H
    </script> 
</body> 
</html>

Output:

D3.js voronoi.y() Function

tarun007

Improve

Article Tags :

D3.js voronoi.extent() Function

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?