La función zoom.translateExtent() en D3.js se usa para establecer la extensión de traducción en la array de puntos especificada [[esquina superior izquierda, esquina inferior derecha]] y devuelve este comportamiento de zoom.
Sintaxis:
zoom.translateExtent([extent])
Parámetros: esta función acepta un solo parámetro como se mencionó anteriormente y se describe a continuación
- Extensión: este parámetro se utiliza para establecer la función delta de la rueda en la función especificada.
Valor devuelto: esta función devuelve el comportamiento del zoom.
Los siguientes programas ilustran la función zoom.translateExtent() en D3.js
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src=
"https://d3js.org/d3.v4.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js">
</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>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src=
"https://d3js.org/d3.v4.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js">
</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>
Producción:
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA