d3.js interpolateRgbBasisClosed()用法及代码示例

D3.js中的d3.interpolateRgbBasisClosed()函数用于通过包含颜色字符串的数组输入返回统一的非有理B-spinal插值器。

用法:

d3.interpolateRgbBasisClosed(values);

参数：该函数接受如上所述和以下描述的单个参数：

Values:它是颜色字符串的数组。

返回值：它返回RGB颜色。

下面给出了上述函数的一些示例。

范例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>

输出：

范例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>

输出：

相关用法

注：本文由纯净天空筛选整理自tarun007大神的英文原创作品 D3.js interpolateRgbBasisClosed() Function。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。