The d3.voronoi() function in D3.js is used to create a new Voronoi diagram layout with the default x and y accessors and a null extent. The Voronoi diagram is drawn using a set of data points that can be specified later.
Syntax:
d3.voronoi()
Parameters: This function does not accept any parameters.
The example below demonstrates the d3.voronoi() function:
Example:
HTML
<!DOCTYPE html> <html> <head> <script src= </script> <script src= </script> </head> <body> <h1 style="color:green"> neveropen </h1> <script> // Import the CSV data for // specifying the Voronoi 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)); // Using the d3.voronoi() function // to create a Voronoi diagram var voronoi = d3.voronoi() .x(function (d) { return x(d.x); }) .y(function (d) { return y(d.y); }) .extent([[0, 0], [400, 400]]); // Adding data to represent the Voronoi // and displaying it 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"); }); </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!
