D3.js interpolateRgbBasisClosed() Function

Last Updated : 04 Aug, 2020

The d3.interpolateRgbBasisClosed() function in D3.js is used to return the uniform non-rational B-spinal interpolator via an input of array that contains strings of colors.

Syntax:

d3.interpolateRgbBasisClosed(values);

Parameters: This function accepts a single parameter as mentioned above and described below:

Values: It is the array of strings of colors.

Return Value: It returns an RGB color.

Below given are a few examples of the above function.

Example 1:

HTML

<!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>  
  <div class="b1">  
    
  </div>  
  <div class="b2">  
    
  </div>  
  <!--Fetching from CDN of D3.js -->
  <script type = "text/javascript" 
          src =   
"https://d3js.org/d3.v4.min.js">  
   </script>  
  <script>  
    console.log("Type of the function is: ",  
typeof(d3.interpolateRgbBasisClosed(["red"])))  
    
    console.log(  
d3.interpolateRgbBasisClosed(["blue", "white", "green"])(0.9))  
    
    console.log(  
d3.interpolateRgbBasisClosed(["blue", "white", "green"])(0.1))  
  </script>  
</body>  
</html>

Output:

Example 2:

HTML

<!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>  
  .bx1,.bx2{  
    width: 100px;  
    height: 100px;  
  }  
</style>  
<body>  
  D3.interpolateRgbBasisClosed()  
  <div class="bx1">  
  </div>  
  <div class="bx2">  
  </div>  
  <!--Fetching from CDN of D3.js -->
  <script type = "text/javascript"
          src =   
"https://d3js.org/d3.v4.min.js">  
   </script>  
  <script>  
    // Array of colors is given  
    let color=  
d3.interpolateRgbBasisClosed(["blue", "white", "green"])(0.9); 
    let color2=  
d3.interpolateRgbBasisClosed(["blue", "white", "green"])(0.1) 
    let bx1=document.querySelector(".bx1");  
    let bx2=document.querySelector(".bx2");  
    bx1.style.backgroundColor=color;  
    bx2.style.backgroundColor=color2;  
  </script>  
</body>  
</html>