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

D3.js interpolateTransformCss() Function

tarun007

Improve

Article Tags :

D3.js interpolateObject() Function

Similar Reads

Thank You!

What kind of Experience do you want to share?