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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...