La función color.brighter() de D3.js se usa para hacer una copia del color con algo de brillo u oscuridad extra en el color original.
Sintaxis:
color.brighter(k)
Parámetro: Esta función acepta solo un parámetro, la cantidad de brillo requerida en el color original. Es el valor entero.
Valores devueltos: Devuelve el objeto.
Ejemplo 1: Cuando no se da el valor de k
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>
<!--fetching from CDN of D3.js -->
<script type="text/javascript" src=
"https://d3js.org/d3.v4.min.js">
</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>
Producción:
Ejemplo 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>
<!--fetching from CDN of D3.js -->
<script type="text/javascript" src=
"https://d3js.org/d3.v4.min.js">
</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>
Producción:
Ejemplo 3: Cuando el valor de 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>
<!--fetching from CDN of D3.js -->
<script type="text/javascript" src=
"https://d3js.org/d3.v4.min.js">
</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>
Producción:
