Las escalas secuenciales son muy similares a la escala continua. En una escala continua, el mapeo se realiza de forma continua entre dominio y rango. La única diferencia es que el rango de salida de esta escala está fijado por su interpolador y este rango no se puede cambiar.
La función d3.scaleSequential() se usa para crear y devolver la escala secuencial. Esta escala tiene un dominio específico y un rango fijo.
Sintaxis:
d3.scaleSequential([[domain, ]interpolator]);
Parámetros: La función dada arriba acepta dos parámetros como se mencionó anteriormente y se describe a continuación.
- dominio: Este es el rango de valor de entrada máximo y mínimo. El dominio predeterminado es [0, 1].
- interpolador: Esto toma una función de interpolador. Si no se especifica, el valor predeterminado es la función de identidad.
Valores devueltos: esta función devuelve una función.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
path1tent="width=device-width,
initial-scale=1.0"/>
<script src=
"https://d3js.org/d3.v4.min.js">
</script>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<h4>d3.scaleSequential() Function</h4>
<script>
var sequential= d3.scaleSequential(
function(t) {
return d3.rgb(t * 400, 1.5, 0.8);
}
)
document.write("<p>sequential(0.1): ",
sequential(0.1) + "</p>");
document.write("<p>sequential(0.2): ",
sequential(0.2) + "</p>");
document.write("<p>sequential(0.3): ",
sequential(0.3) + "</p>");
document.write("<p>sequential(0.4): ",
sequential(0.4) + "</p>");
document.write("<p>sequential(0.5): ",
sequential(0.5) + "</p>");
document.write("<p>sequential(0.6): ",
sequential(0.6) + "</p>");
</script>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
path1tent="width=device-width,
initial-scale=1.0"/>
<script src=
"https://d3js.org/d3.v4.min.js">
</script>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<h4>d3.scaleSequential() Function</h4>
<script>
var sequential= d3.scaleSequential(
function(t) {
return d3.interpolateNumber(t * 400, 0, 10);
}
)
document.write("<p>sequential(0.1)(-1): ",
sequential(0.1)(-1) + "</p>");
document.write("<p>sequential(0.1)(1): ",
sequential(0.1)(1) + "</p>");
document.write("<p>sequential(0.1)(0): ",
sequential(0.1)(0) + "</p>");
document.write("<p>sequential(0.1)(0.5): ",
sequential(0.1)(0.5) + "</p>");
</script>
</body>
</html>
Producción:
