La función transform.translate() en la biblioteca D3.js se usa para obtener la transformación cuya traducción tx1 y ty1 es igual a tx0 + tk x y ty0 + tk y , donde tx0 y ty0 es la traducción de la transformación y tk es la escala de la transformación .
Sintaxis:
transform.translate(x, y)
Parámetros: Esta función acepta el siguiente parámetro como se mencionó anteriormente y se describe a continuación.
- x, y: estos parámetros son el argumento del punto de traducción.
Valor devuelto: esta función devuelve el comportamiento del zoom transformado.
Los siguientes programas muestran la función transform.translate() de la biblioteca D3.js.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
D3.js | transform.translate() Function
</title>
<script src="https://d3js.org/d3.v4.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js">
</script>
</head>
<body>
<center>
<h1 style="color: green;">
Geeksforgeeks
</h1>
<h3>D3.js | transform.translate() Function</h3>
<svg height="200px" width="400px">
<g id="GFG" transform=
"translate(25,25) scale(0.25)">
</g>
</svg>
<script>
var svg = d3.select("#GFG");
svg.append("rect").attr({
"x": 0, "y": 0, "height": 100,
"width": 100, "fill": "yellow"
})
svg.append("rect").attr({
"x": 100, "y": 100, "height": 100,
"width": 100, "fill": "orange"
})
svg.append("rect").attr({
"x": 0, "y": 100, "height": 100,
"width": 100, "fill": "red"
})
svg.append("rect").attr({
"x": 100, "y": 0, "height": 100,
"width": 100, "fill": "purple"
})
var zoom = d3.behavior.zoom()
.on("zoom", function () {
var val_1 = d3.event.translate;
var val_scale = d3.event.scale;
svg.attr("transform", "translate("
+ val_1[0] + "," + val_1[1]
+ ") scale(" + val_scale + ")")
})
.scaleExtent([1, 10])
.scale(1).translate([0, 0])
d3.select("svg").call(zoom)
d3.selectAll("rect").on("mousedown",
function () {
var scale = Math.random() * 3;
var translate = [Math.random() * 10,
Math.random() * 10]
zoom.scale(scale);
zoom.translate(translate);
// New transition
var T = svg.transition().duration(500)
zoom.event(T);
})
</script>
</center>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
D3.js | transform.translate() Function
</title>
<script src="https://d3js.org/d3.v4.min.js">
</script>
<style>
circle {
opacity: 0.7;
fill: green;
}
</style>
</head>
<body>
<center>
<h1 style="color: green;">
Geeksforgeeks
</h1>
<h3>D3.js | transform.translate() Function</h3>
<svg></svg>
<script>
var transform = d3.zoomIdentity
.translate(100, 0).scale(1);
var zoom = d3.zoom().on("zoom", handleZoom);
var svg = d3.select("svg")
.attr('width', 400)
.attr('height', 200)
.style("background", "orange")
.call(zoom)
.call(zoom.transform, transform);
var zoomable = svg
.append("g")
.attr("class", "zoomable")
.attr("transform", transform);
var circles = zoomable.append('circle')
.attr("id", "circles")
.attr("cx", 100)
.attr("cy", 100)
.attr('r', 30);
function handleZoom() {
if (zoomable) {
zoomable.attr("transform",
d3.event.transform);
}
};
</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