La función interpolateObject() en D3.js se usa para devolver la función de interpolador entre los dos objetos dados. Si existe alguna propiedad de «b» en «a», se crea un interpolador genérico tanto para «a» como para «b» mediante la interpolación.
Sintaxis:
d3.interpolateObject(a, b);
Parámetros: Hay dos parámetros dados a continuación:
- a: Es el objeto Javascript.
- b: También es el Objeto Javascript.
Devoluciones: Devuelve la función de interpolación de los dos objetos.
A continuación se dan algunos ejemplos de la función anterior.
Ejemplo 1:
<!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>
let obj1={
"a": 10,
"b": 20,
"c": 30
}
let obj2={
"a": 40,
"b": 50,
"d": 60,
"e": 70
}
let interpolationFunction=
d3.interpolateObject(obj1, obj2);
/* Note the property d and e will not change
as they are not present in obj1*/
console.log(interpolationFunction(0))
console.log(interpolationFunction(0.5))
console.log(interpolationFunction(1))
console.log(interpolationFunction(1.5))
console.log(interpolationFunction(2))
console.log(interpolationFunction(2.5))
console.log(interpolationFunction(3))
</script>
</body>
</html>
Producción:
Ejemplo 2:
<!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>
console.log("When obj a is not given")
console.log(d3.interpolateObject({}, {"a":1, "b":2})(0.5))
console.log(d3.interpolateObject({}, {"a":1, "b":2})(1))
console.log(d3.interpolateObject({}, {"a":1, "b":2})(2))
console.log("When no property of obj b exists in obj a")
console.log(
d3.interpolateObject({"c":4, "d":3}, {"a":10, "b":12})(5))
console.log("When both objects are empty object")
console.log(d3.interpolateObject({}, {})(5))
</script>
</body>
</html>
Producción:
