D3.js interpolateCubehelixLong()函数

d3.interpolateCubehelixLong()函数用于返回两个给定颜色 A 和 B 之间的 cubehelix 颜色空间插值器。它使用色调之间的最短路径。

句法：

d3.interpolateCubehelixLong(a, b);

参数：它采用上面给出和下面描述的两个参数。

• a：是字符串格式的颜色名称。
• b：也是字符串格式的颜色名称。

返回值：返回函数。

示例 1：

HTML

  

    
    
    
    
    
    

  

  
    
        console.log("Type of the function is: ",
            typeof(d3.interpolateCubehelixLong("white", "red")))
  
        console.log(
            d3.interpolateCubehelixLong("blue", "white")(0.9))
  
        console.log(
            d3.interpolateCubehelixLong("white", "green")(0.1)) 
    

  

输出：

示例 2：

HTML

  

    
    
  
      
    
    
    
    
        .bx1,
        .bx2 {
            width: 100px;
            height: 100px;
        }
    

  

      
D3.interpolateCubehelixLong()
  
    
    
      
    
        let color1 =
            d3.interpolateCubehelixLong("green", "white")(0.1)
        let color2 =
            d3.interpolateCubehelixLong("white", "green")(0.1)
        let bx1 = document.querySelector(".bx1");
        bx1.style.backgroundColor = color1;
        let bx2 = document.querySelector(".bx2");
        bx2.style.backgroundColor = color2; 
    

  

输出：注意将绿色作为第一个参数和白色作为第一个参数之间的区别。