La función d3.interpolateTransformCss() en D3.js se usa para devolver la función de interpolador entre dos propiedades CssTransform dadas. Aquí se pueden usar varias propiedades de Transform como traducir, rotar, sesgarX y escalar.
Sintaxis:
d3.interpolateTransformCss(a, b);
Parámetros:
- a: Es una string de propiedad CSS Transform.
- b: Es una string de propiedad CSS Transform.
Devoluciones: Devuelve la función interpoladora.
A continuación se dan algunos ejemplos de la función anterior.
Ejemplo 1:
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> </style> <body> <!--Fetching from CDN of D3.js --> <script type = "text/javascript" src = "https:// d3js.org/d3.v4.min.js"> </script> <script> // It gives the intermediate value between two given properties console.log(d3.interpolateTransformCss( "translateX(10px) scale(1.5)", "translateY(15px) scale(2)" )(0.5)) // It gives interpolate value with 0 part of "a" and 1 part of "b" console.log(d3.interpolateTransformCss( "translateX(10px) scale(1.5)", "translateY(15px) scale(2)" )(1)) // It gives interpolate value with 0.2 part of "a" and 0.8 part of "b" console.log(d3.interpolateTransformCss( "translateX(10px) scale(1.5)", "translateY(15px) scale(2)" )(0.8)) </script> </body> </html>
Producción:
Ejemplo 2:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box1{
margin-bottom: 40px;
color: white;
border: 2px solid black;
width: 150px;
height: 150px;
background-color: green;
transform: scale();
}
div{
height: 100vh;
display:flex;
margin-left: 60px;
align-items: center;
}
</style>
<body>
D3.interpolateTransformCss()
<div>
<div class="box1">
</div>
<div class="box2">
</div>
<button>Clickme</button>
</div>
<!--fetching from CDN of D3.js -->
<script type = "text/javascript"
src = "https://d3js.org/d3.v4.min.js">
</script>
<script>
let box1=document.querySelector(".box1");
let btn=document.querySelector("button");
let interpolateFunc=d3.interpolateTransformCss(
"translateY(15px) scale(1.5)",
"translateX(3px) rotate(10deg)"
)(0.5);
func=()=>{
box1.style.transform=interpolateFunc;
}
btn.addEventListener("click", func);
</script>
</body>
</html>
Producción:
Antes de hacer clic:
Después de hacer clic:
