D3.js interpolateCubehelix()函数

D3.js 中的d3.interpolateCubehelix()函数用于返回 cubehelix 颜色空间插值器函数。它采用两种颜色作为参数。

句法：

d3.interpolateCubehelix(a, b);

或者

d3.interpolateCubehelix.gamma(k)(a, b);

参数：它需要两个参数。

• a：它是数据类型字符串的颜色名称。
• b: 也是字符串类型的颜色名称。

返回：它返回插值函数。

下面给出了上述函数的几个例子。

示例 1：

  
  
  Document




  
  
  
  
    // Printing the return type of the function
    console.log(
"function type is: ", typeof(d3.interpolateCubehelix("blue", "white")))
    // Using function d3.interpolateCubehelix()
    console.log(
"A RGB string: ", d3.interpolateCubehelix("blue", "white")(0.5))
    //using gamma
    console.log(
"A RGB string", d3.interpolateCubehelix.gamma(2)("blue", "white")(0.2))
  

输出：

示例 2：

  
  
  Document


  .box1, .box2{
    display: flex;
    margin-bottom: 40px;
    color: white;
    border: 2px solid black;
    width: fit-content;
    height: 150px;
  }


  D3.interpolateCubehelix()
  
    
d3.interpolateCubehelix.gamma(10)("green", "white")(0.5)
    
    
d3.interpolateCubehelix("green", "white")(0.5)
    
  
  
  
  
  
    let box1=document.querySelector(".box1");
    let box2=document.querySelector(".box2");
    // Please note the effect of gamma
    let color=
d3.interpolateCubehelix.gamma(10)("green", "white")(0.5);
    let color2=
d3.interpolateCubehelix("green", "white")(0.5); 
    // Changing css of the div with class-name box1
    box1.style.backgroundColor=color;
    // Changing css of the div with class-name box2
    box2.style.backgroundColor=color2;
  

输出：