D3.js d3.interpolateRdPu()函数

d3.js 中的d3.interpolateRdPu()函数用于返回与“RdPu”的顺序配色方案相对应的颜色。此函数返回的颜色为 RGB 格式。此函数设置红色和紫色之间的颜色范围。给出的值介于 0 和 1 之间。

句法：

d3.interpolateRdPu(t);

参数：此函数采用上面提到的单个参数，如下所述：

• t：此参数采用 [0,1] 范围内的数字。

返回值：此函数以 RGB 格式返回字符串颜色。

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

示例 1：

HTML

  

    
    
      
    
    
    

  

    
        console.log(d3.interpolateRdPu(0.1));
        console.log(d3.interpolateRdPu(0.2));
        console.log(d3.interpolateRdPu(0.3));
        console.log(d3.interpolateRdPu(0.4));
        console.log(d3.interpolateRdPu(0.8));
        console.log(d3.interpolateRdPu(0.9));
        console.log(d3.interpolateRdPu(0.6));
        console.log(d3.interpolateRdPu(0.254));
    

  

输出：

示例 2：

HTML

  

    
    
  
    
    
    
  
    
        div {
            padding: 5px;
            text-align: center;
            vertical-align: middle;
            display: flex;
            justify-content: center;
            width: fit-content;
            height: 50px;
            float: left;
        }
    

  

    D3.interpolateRdPu()
    
        
            (0.6)
        
    
    
        
            (0.5)
        
    
    
        
            (0.4)
        
    
    
        
            (0.3)
        
    
    
        
            (0.2)
        
    
    
        
            (0.1)
        
    
    
        // Creating different colors for different
        // Values of t as 0.6,0.5...  
        let color1 = d3.interpolateRdPu(0.6);
        let color2 = d3.interpolateRdPu(0.5);
        let color3 = d3.interpolateRdPu(0.4);
        let color4 = d3.interpolateRdPu(0.3);
        let color5 = d3.interpolateRdPu(0.2);
        let color6 = d3.interpolateRdPu(0.1);
  
        // Selecting Div using query selector 
        let box1 = document.querySelector(".box1");
        let box2 = document.querySelector(".box2");
        let box3 = document.querySelector(".box3");
        let box4 = document.querySelector(".box4");
        let box5 = document.querySelector(".box5");
        let b6 = document.querySelector(".b6");
  
        // Setting style and BG color of 
        /// the particular DIVs 
        box1.style.backgroundColor = color1;
        box2.style.backgroundColor = color2;
        box3.style.backgroundColor = color3;
        box4.style.backgroundColor = color4;
        box5.style.backgroundColor = color5;
        b6.style.backgroundColor = color6; 
    

  

输出：