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 secuencial.interpolador() en d3.js se utiliza para configurar el interpolador de la báscula. Si se especifica el interpolador, establece el interpolador de la escala en la función especificada, de lo contrario
Sintaxis:
sequential.interpolator([interpolator]);
Parámetros: esta función acepta un solo parámetro como se mencionó anteriormente y se describe a continuación:
- interpolador: Esto toma la función de interpolador. Si no se especifica el interpolador, devuelve el interpolador actual de la escala.
Valores devueltos: esta función no devuelve nada.
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.v6.min.js">
</script>
</head>
<body>
<h2 style="color:green"> GeeksforGeeks </h2>
<h4> D3.js | sequential.interpolator() Function</h4>
<script>
var sequential = d3.scaleSequential()
// Setting the interpolator of the scale.
.interpolator((t) => t * 2);
document.write("<p>sequential(2): ",
sequential(2) + "</p>");
document.write("<p>sequential(4): ",
sequential(4) + "</p>");
document.write("<p>sequential(10): ",
sequential(10) + "</p>");
document.write("<p>sequential(20): ",
sequential(20) + "</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.v6.min.js">
</script>
</head>
<body>
<h2 style="color:green"> GeeksforGeeks </h2>
<h4>D3.js | sequential.interpolator() Function</h4>
<script>
var sequential = d3.scaleSequential()
// Setting the interpolator of the scale.
.interpolator(d3.interpolateSpectral)
// Setting the domain of the scale.
.domain([1, 100]);
document.write("<p>sequential(2): ",
sequential(2) + "</p>");
document.write("<p>sequential(4): ",
sequential(4) + "</p>");
document.write("<p>sequential(10): ",
sequential(10) + "</p>");
document.write("<p>sequential(20): ",
sequential(20) + "</p>");
</script>
</body>
</html>
Producción:
