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>  