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">
GeeksforGeeks
</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,
GeeksforGeeks 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!
Last Updated :
01 Oct, 2020
Like Article
Save Article