The voronoi.y() function is used to set the y-coordinate accessor. If y is not specified then this function returns the current y-coordinate accessor to the Voronoi generator function.
Syntax:
d3.voronoi.y([y]);
Parameters: This function takes one parameter as given above and described below:
- y: It is the value for the y-coordinate accessor.
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.y() function.
Example 1:
<!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.y()</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); });             // Use of voronoi.y() Function                 voronoi.y(function(d) { return y(d.y); })                 .extent([[0, 0], [400,400]]);                                   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:
Example 2:
<!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 src=     </script> </head>   <body>     <h1 style="color:green">neveropen</h1>     <h3 style="color:green">voronoi.y()</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); });             // Use of voronoi.y() Function                 voronoi.y(function(d) { return y(d.y); })                 // Setting the extent                 .extent([[100, 100], [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","green");         });           // 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!
… [Trackback]
[…] Info to that Topic: geeksforgeeks.org/d3-js-voronoi-y-function/ […]
… [Trackback]
[…] Read More to that Topic: geeksforgeeks.org/d3-js-voronoi-y-function/ […]