D3.js interpolateObject() Function

0 0 1 minute read

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> 
  <!--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> 

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> 
  <!--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> 

Output:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!