The voronoi.y() function is used to set the y-coordinate accessor. If y is not specified then this function returns the current y-coordinate accessor to the Voronoi generator function.
Syntax:
d3.voronoi.y([y]);
Parameters: This function takes one parameter as given above and described below:
- y: It is the value for the y-coordinate accessor.
Return Value: This function does not return anything.
Note: Please create a data.csv file. The data for the file is given in the below code.
Below given are a few examples of the Voronoi.y() function.
Example 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"
</ script >
</ 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 >
|
Output:
Example 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"
</ script >
< script src =
</ 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 >
|
Output: