D3.js color.darker()函数

D3.js 的color.darker()函数用于制作颜色的副本，在原始颜色中增加一些额外的暗度或亮度。

句法：

color.darker(k)

参数：它需要以下参数：

• k：这里的“k”是原始颜色所需的暗度。它是整数值。

返回值：它返回对象。

示例 1：

当没有给出 k 的值时

  
  
  Document


  .originalColor{
    height: 100px;
    width: 100px;
  }
  .darkerColor{
    height: 100px;
    width: 100px;
  }


  Color without color.darker() property
  
  
  
  Color with color.darker() property
  
  
  
  
  
  
  
    let originalColor=
           document.querySelector(".originalColor");
    let darkerColor=
           document.querySelector(".darkerColor");
  
    var color= d3.color("green");
    originalColor.style.backgroundColor=
           `rgb(${color.r}, ${color.g}, ${color.b})`;
    var color=color.darker()
    darkerColor.style.backgroundColor=
          `rgb(${color.r}, ${color.g}, ${color.b})`;
  

输出：

示例 2：

当 k > 0 时

  
  
  Document


  .originalColor{
    height: 100px;
    width: 100px;
  }
  .darkerColor{
    height: 100px;
    width: 100px;
  }


  Color without color.darker() property
  
  
  
  Color with color.darker(2) property
  
  
  
  
  
  
  
    let originalColor=
document.querySelector(".originalColor");
    let darkerColor=
document.querySelector(".darkerColor");
    var color= d3.color("green");
    originalColor.style.backgroundColor=
`rgb(${color.r}, ${color.g}, ${color.b})`;
    var color=color.darker(2)
    darkerColor.style.backgroundColor=
`rgb(${color.r}, ${color.g}, ${color.b})`;
  

输出：

示例 3：

当k值<0

  
  
  Document


  .originalColor{
    height: 100px;
    width: 100px;
  }
  .darkerColor{
    height: 100px;
    width: 100px;
  }


  Color without color.darker() property
  
  
  
  Color with color.darker(-2) property
  
  
  
  
  
  
  
    let originalColor=
document.querySelector(".originalColor");
    let darkerColor=
document.querySelector(".darkerColor");
    var color= d3.color("green");
    originalColor.style.backgroundColor=
`rgb(${color.r}, ${color.g}, ${color.b})`;
    var color=color.darker(-2)
    darkerColor.style.backgroundColor=
`rgb(${color.r}, ${color.g}, ${color.b})`;
  

输出：