D3.js zoom.translateExtent() Function
Last Updated :
07 Sep, 2020
The zoom.translateExtent() Function in D3.js is used to set the translate extent to the specified array of points [[top-left corner, bottom-right corner]] and returns this zoom behaviour.
Syntax:
zoom.translateExtent([extent])
Parameters: This function accepts a single parameter as mentioned above and described below
- extent: This parameter is used to set the wheel delta function to the specified function.
Return Value: This function returns the zoom behaviour.
Below programs illustrate the zoom.translateExtent() function in D3.js
Example 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 style="color: green;">
Geeksforgeeks
</h1>
<h3>
D3.js | zoom.translateExtent() Function
</h3>
<div id="GFG"></div>
<script>
var height = 300;
var width = 300;
var zoom = d3.zoom()
.translateExtent([[0, 0], [300, 300]])
.on("zoom", zoomed);
var svg = d3.select("#GFG")
.append("svg")
.attr("width", height)
.attr("height", width)
.append("g")
svg.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("height", 200)
.attr("width", 400)
.style("fill", "green");
var circle = svg.append("circle")
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 20)
.style("fill", "red")
svg.call(zoom);
function zoomed() {
circle.attr(
"transform", d3.event.transform);
}
</script>
</center>
</body>
</html>
|
Output:
Example 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src=
</script>
<script src=
</script>
<style>
#svg {
background-color: rgb(149, 160, 230);
}
#shape {
fill: rgb(232, 7, 228);
stroke: white;
stroke-width: 3px;
}
#shape:hover {
fill: rgb(13, 214, 30);
}
</style>
</head>
<body>
<center>
<h1 style="color: green;">
Geeksforgeeks
</h1>
<h3>D3.js | zoom.translateExtent() Function</h3>
<div id="GFG"></div>
<script>
var width = 300,
height = 200;
var container =
d3.select("#GFG").append("div");
var svg =
container.append(
"svg").attr(
"id", "svg").attr(
"width", width).attr(
"height", height);
var group = svg.append("g");
var shape = group.append(
"rect").attr(
"id", "shape").attr(
"width", 150).attr(
"height", 100).attr(
"x", 75).attr("y", 50);
zoom = d3
.zoom()
.scaleExtent([1, 3])
.translateExtent([
[0, 0],
[width, height],
])
.on("zoom", zoomed);
svg.call(zoom);
function zoomed() {
change = d3.event.transform;
console.log(change);
group.attr("transform", "translate(" +
[change.x, change.y] + ")scale(" +
change.k + ")");
group.select("#shape").style(
"stroke-width", 3 / change.k + "px");
}
</script>
</center>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...