La función zoom.scaleExtent() en D3.js se usa para establecer que la escala se extienda a la array de números especificada [k0, k1]. k0 es el factor de escala mínimo permitido y k1 es el factor de escala máximo permitido
Sintaxis:
zoom.scaleExtent([extent])
Parámetros: esta función acepta un solo parámetro como se mencionó anteriormente y se describe a continuación
- extension: este parámetro se puede definir como especificado como una función que devuelve dicha array.
Valor devuelto: esta función devuelve el comportamiento del zoom.
Los siguientes programas ilustran la función zoom.scaleExtent() 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/3.4.11/d3.min.js">
</script>
</head>
<body>
<center>
<h1 style="color: green;">
Geeksforgeeks
</h1>
<h3>D3.js | zoom.scaleExtent() Function</h3>
<svg height="200px" width="400px">
<g id="main" transform="translate(25, 25) scale(0.25)"></g>
</svg>
<script>
var svg = d3.select("#main");
svg.append(
"rect").attr({"x":0, "y":0, "height":100, "width":100, "fill":"red"})
svg.append(
"rect").attr({"x":100, "y":100, "height":100, "width":100, "fill":"blue"})
svg.append(
"rect").attr({"x":0, "y":100, "height":100, "width":100, "fill":"green"})
svg.append(
"rect").attr({"x":100, "y":0, "height":100, "width":100, "fill":"purple"})
var zoom = d3.behavior.zoom().on("zoom", function(){
var t = d3.event.translate;
var s = d3.event.scale;
svg.attr(
"transform", "translate("+t[0]+", "+t[1]+") scale("+s+")")
})
.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()*100, Math.random()*100]
zoom.scale(scale);
zoom.translate(translate);
//new transition
var T = svg.transition().duration(5000)
zoom.event(T);
})
</script>
</center>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.js">
</script>
<style>
circle {
fill: green;
opacity: 0.2;
stroke: black;
stroke-width: 1px;
}
svg {
border: 1px solid;
font: 13px sans-serif;
text-anchor: middle;
}
</style>
</head>
<body>
<center>
<h1 style="color: green;">
Geeksforgeeks
</h1>
<h3>D3.js | zoom.scaleExtent() Function</h3>
<div id="gfg"
style="width: 400px;
margin: auto">
</div>
<script>
function zoom_filter(divId) {
var width = 400, height=250, maxR=30;
var svg = d3.select(divId)
.append('svg')
.attr('width', width)
.attr('height', height)
var g = svg.append('g')
// create 15 circles
var numCircles = 55;
var circles = [];
for (var i = 0; i < numCircles; i++)
circles.push(
{'x': 1+Math.floor(Math.random() * width),
'y': 1+Math.floor(Math.random() * height),
'r': 1+Math.floor(Math.random() * maxR)});
g.selectAll('circle')
.data(circles)
.enter()
.append('circle')
.attr('cx', function(d) { return d.x; })
.attr('cy', function(d) { return d.y; })
.attr('r', function(d) { return d.r; })
.classed('no-zoom', true)
var zoom = d3.zoom()
.scaleExtent([1, 10])
.on('zoom', function(d) { g.attr(
'transform', d3.event.transform); });
svg.call(zoom);
}
</script>
<script>
zoom_filter('#gfg');
</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