D3.js color.brighter()函数

D3.js 的color.brighter()函数用于在原始颜色中复制具有一些额外亮度或暗度的颜色。

句法：

color.brighter(k)

参数：该函数只接受一个参数k 是原始颜色所需的亮度量。它是整数值。

返回值：它返回对象。

示例 1：当未给出 k 的值时

HTML

    
        
        
        D3.js color.brighter() Function
    
    
        .box {
            height: 100px;
            width: 100px;
        }
        .box1 {
            height: 100px;
            width: 100px;
        }
    
    
        Color without color.brighter() property
        
        Color with color.brighter() property
        
        
        
        
        
            let box = document.querySelector(".box");
            let box1 = document.querySelector(".box1");
            var color = d3.color("green");
            box.style.backgroundColor = 
              `rgb(${color.r},${color.g},${color.b})`;
            var color = color.brighter();
            box1.style.backgroundColor = 
              `rgb(${color.r},${color.g},${color.b})`;
        
    

输出：

示例 2：

HTML

    
        
        
        D3.js color.brighter() Function
    
    
        .box {
            height: 100px;
            width: 100px;
        }
        .box1 {
            height: 100px;
            width: 100px;
        }
    
    
        Color without color.brighter() property
        
        Color with color.brighter(10) property
        
        
        
        
        
            let box = document.querySelector(".box");
            let box1 = document.querySelector(".box1");
            var color = d3.color("green");
            box.style.backgroundColor = 
              `rgb(${color.r},${color.g},${color.b})`;
            var color = color.brighter(10);
            box1.style.backgroundColor = 
              `rgb(${color.r},${color.g},${color.b})`;
        
    

输出：

示例 3：当 k < 0 时

HTML

    
        
        
        D3.js color.brighter() Function
    
    
        .box {
            height: 100px;
            width: 100px;
        }
        .box1 {
            height: 100px;
            width: 100px;
        }
    
    
        Color without color.brighter() property
        
        Color with color.brighter(-10) property
        
        
        
        
        
            let box = document.querySelector(".box");
            let box1 = document.querySelector(".box1");
            var color = d3.color("green");
            box.style.backgroundColor = 
              `rgb(${color.r},${color.g},${color.b})`;
            var color = color.brighter(-10);
            box1.style.backgroundColor =
              `rgb(${color.r},${color.g},${color.b})`;
        
    

输出：