Categories
28°C, New York
Home D3.js D3.js voronoi.extent() Function

D3.js voronoi.extent() Function

D3.js zoom.extent() Function

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">w3wiki</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">w3wiki</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:

													
													
												

												
												

													
													

													
													
												

												
												

													
													

													
													
												

												
												

													
													

													
													
												

												
												

													
													

													
													
												

												
													
											

											
										

									

									

										
										
Tags:

										
										#D3.js
										
										#JavaScript
										
										#Web Technologies
										
										

									

									

										

											
										

										

											
											
												D3.js zoom.extent() Function