La función d3.voronoi() en D3.js se usa para crear un nuevo diseño de diagrama de Voronoi con los accesores x e y predeterminados y una extensión nula . El diagrama de Voronoi se dibuja utilizando un conjunto de puntos de datos que se pueden especificar más adelante.
Sintaxis:
d3.voronoi()
Parámetros: Esta función no acepta ningún parámetro.
El siguiente ejemplo demuestra la función d3.voronoi() :
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script 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">
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>
Producción:
