D3.js interpolateObject() Function
Last Updated :
29 Jul, 2020
The interpolateObject() function in D3.js is used to return the interpolator function between the two objects given. If any property of “b” exists in “a” then a generic interpolator is created for both “a” and “b” using interpolation.
Syntax:
d3.interpolateObject(a, b);
Parameters: There are two parameters given below:
- a: It is the Javascript object.
- b: It is also the Javascript Object.
Returns: It returns the interpolation function of the two objects.
Below given are a few examples of the above function.
Example 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 >
< script type = "text/javascript"
</ 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 >
|
Output:
Example 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 >
< script type = "text/javascript"
</ 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 >
|
Output:
Share your thoughts in the comments
Please Login to comment...