Skip to content
Related Articles

Related Articles

Improve Article
D3.js interpolateRgbBasis() Function
  • Last Updated : 24 Jul, 2020

d3.InterpolateRgbBasis() Function is used to return the uniform nonrational B-spline interpolator function of an array of colors given to it that is converted to a RGB color.

Syntax:

d3.interpolateRgbBasis(colors);

Parameters: It takes an array of colors.

Returns: It returns the Interpolator function.

Below given are a few Examples of Interpolate.RgbBasis() function.



Example 1: Printing output in the console.




<!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>
  .b1, .b2{
    width: 100px;
    height: 100px;
  }
</style>
<body>
  <div class="b1">
  
  </div>
  <div class="b2">
  
  </div>
  <!--Fetching from CDN of D3.js -->
  <script type = "text/javascript" 
          src
   </script>
  <script>
    console.log("Type of the function is: ",
 typeof(d3.interpolateRgbBasis(["red", "white", "blue"])))
  
    console.log(
d3.interpolateRgbBasis(["red", "white", "blue"])(0.5))
  
    console.log(
d3.interpolateRgbBasis(["red", "white", "blue"])(0.2))
  </script>
</body>
</html>

Output:

Example 2: Using d3.interpolateRgbBasis in 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>
  div{
    width: 100px;
    height: 100px;
  }
</style>
<body>
  D3.interpolateRgbBasis()
  <div class="b1">
  </div>
  <div class="b2">
  </div>
  <!--Fetching from CDN of D3.js -->
  <script type = "text/javascript"
          src
   </script>
  <script>
    // Array of colors is given
    let color=
d3.interpolateRgbBasis([ "white", "red", "green"])(0.9);
  
    let color2=
d3.interpolateRgbBasis(["red", "white", "green"])(0.8);
  
    let b1=document.querySelector(".b1");
    let b2=document.querySelector(".b2");
    b1.style.backgroundColor=color;
    b2.style.backgroundColor=color2;
  </script>
</body>
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :