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" </script> </script> </head> <body> <h1 style="color:green">neveropen</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" </script> </script> </head> <body> <h1 style="color:green">neveropen</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:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
