La función voronoi.extent() se utiliza para establecer la extensión de la función generadora de Voronoi. El valor de extensión dado se utiliza para establecer la extensión del recorte del diseño de Voronoi dentro de los límites dados. Los límites se dan como una array bidimensional que se parece a [[x0, y0], [x1, y1]]. Si no se especifica la extensión, devuelve la extensión del clip actual cuyo valor predeterminado es nulo.
Sintaxis:
d3.voronoi().extent([extent]);
Parámetros: Esta función toma un parámetro como se indica arriba y se describe a continuación.
- Extensión: informa sobre el área a recortar. Toma valor en forma de array 2-D.
Valor devuelto: esta función no devuelve nada.
Nota: cree un archivo «data.csv». Los datos para el archivo se dan en el siguiente código.
A continuación se muestran algunos ejemplos de la función Voronoi.extent() .
Ejemplo 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"
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>
<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>
Producción:
Ejemplo 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"
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>
<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>
Producción:
