D3.js color.brighter() Function
Last Updated :
28 Jul, 2020
The color.brighter() function of D3.js is used to make a copy of the color with some extra brightness or darkness in the original color.
Syntax:
color.brighter(k)
Parameter: This function accepts only one parameter k is the amount of brightness 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
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta
name = "viewport"
content=" width = device -width,
initial-scale = 1 .0"/>
< title >D3.js color.brighter() Function</ title >
</ head >
< style >
.box {
height: 100px;
width: 100px;
}
.box1 {
height: 100px;
width: 100px;
}
</ style >
< body >
Color without color.brighter() property
< div class = "box" ></ div >
Color with color.brighter() property
< div class = "box1" ></ div >
< script type = "text/javascript" src =
</ script >
< script >
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})`;
</ script >
</ body >
</ html >
|
Output:
Example 2:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport"
content=" width = device -width,
initial-scale = 1 .0" />
< title >D3.js color.brighter() Function</ title >
</ head >
< style >
.box {
height: 100px;
width: 100px;
}
.box1 {
height: 100px;
width: 100px;
}
</ style >
< body >
Color without color.brighter() property
< div class = "box" ></ div >
Color with color.brighter(10) property
< div class = "box1" ></ div >
< script type = "text/javascript" src =
</ script >
< script >
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})`;
</ script >
</ body >
</ html >
|
Output:
Example 3: When value of k < 0
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport"
content=" width = device -width,
initial-scale = 1 .0" />
< title >D3.js color.brighter() Function</ title >
</ head >
< style >
.box {
height: 100px;
width: 100px;
}
.box1 {
height: 100px;
width: 100px;
}
</ style >
< body >
Color without color.brighter() property
< div class = "box" ></ div >
Color with color.brighter(-10) property
< div class = "box1" ></ div >
< script type = "text/javascript" src =
</ script >
< script >
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})`;
</ script >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...