La función voronoi.y() se utiliza para establecer el acceso de coordenadas y. Si no se especifica y, esta función devuelve el descriptor de acceso de la coordenada y actual a la función generadora de Voronoi.
Sintaxis:
d3.voronoi.y([y]);
Parámetros: esta función toma un parámetro como se indicó anteriormente y se describe a continuación:
- y: Es el valor para el descriptor de acceso de la coordenada y.
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.y().
Ejemplo 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"
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.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>
Producción:
Ejemplo 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"
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.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>
Producción:
