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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。