The color.darker() function of D3.js is used to make a copy of the color with some extra darkness or brightness in the original color.
Syntax:
color.darker(k)
Parameter: It takes the following parameters:
- k: Here “k” is the amount of darkness required in the original color. It is the Integer value.
Return values: It returns the object.
Example 1:
When the value of k is not given
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content=" width = device -width,
initial-scale = 1 .0">
< title >Document</ title >
</ head >
< style >
.originalColor{
height: 100px;
width: 100px;
}
.darkerColor{
height: 100px;
width: 100px;
}
</ style >
< body >
Color without color.darker() property
< div class = "originalColor" >
</ div >
Color with color.darker() property
< div class = "darkerColor" >
</ div >
<!--fetching from CDN of D3.js -->
< script type = "text/javascript" </ script >
< script >
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})`;
</ script >
</ body >
</ html >
|
Output:
Example 2:
When the value of k > 0
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content=" width = device -width,
initial-scale = 1 .0">
< title >Document</ title >
</ head >
< style >
.originalColor{
height: 100px;
width: 100px;
}
.darkerColor{
height: 100px;
width: 100px;
}
</ style >
< body >
Color without color.darker() property
< div class = "originalColor" >
</ div >
Color with color.darker(2) property
< div class = "darkerColor" >
</ div >
<!--fetching from CDN of D3.js -->
< script type = "text/javascript" </ script >
< script >
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})`; </ script >
</ body >
</ html >
|
Output:
Example 3:
When value of k<0
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content=" width = device -width,
initial-scale = 1 .0">
< title >Document</ title >
</ head >
< style >
.originalColor{
height: 100px;
width: 100px;
}
.darkerColor{
height: 100px;
width: 100px;
}
</ style >
< body >
Color without color.darker() property
< div class = "originalColor" >
</ div >
Color with color.darker(-2) property
< div class = "darkerColor" >
</ div >
<!--fetching from CDN of D3.js -->
< script type = "text/javascript" </ script >
< script >
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})`; </ script >
</ body >
</ html >
|
Output: