Las escalas divergentes son muy similares a las escalas continuas. La única diferencia es que el rango de salida de esta escala está fijado por el interpolador, por lo que el rango no es configurable.
La función diverging.interpolate() se utiliza para configurar el interpolador de la escala divergente. Si no se especifica el interpolador, establece el interpolador de la escala en la función especificada.
Sintaxis:
diverging.interpolator([interpolator]);
Parámetros: esta función acepta un solo parámetro como se mencionó anteriormente y se describe a continuación:
- interpolador: Este parámetro acepta la función de interpolador.
Valores devueltos: esta función no devuelve nada.
A continuación se dan algunos ejemplos de la función dada anteriormente.
Ejemplo 1:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" path1tent="width=device-width, initial-scale=1.0"/> <title>GeekforGeeks</title> <script src="https://d3js.org/d3.v6.min.js"></script> </head> <style> </style> <body> <h2 style="color:green"> GeeksforGeeks </h2> <h4> D3.js | diverging.interpolator() Function </h4> <script> var diverging = d3.scaleDiverging() // Setting the interpolate function .interpolator(d3.interpolateRainbow); // Default domain is used i.e [0, 1] document.write( "<p>diverging(0.1): ", diverging(0.1) + "</p>"); document.write( "<p>diverging(0.2): ", diverging(0.2) + "</p>"); </script> </body> </html>
Producción:
Ejemplo 2:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" path1tent="width=device-width, initial-scale=1.0"/> <title>GeekforGeeks</title> <script src="https://d3js.org/d3.v6.min.js"></script> </head> <style> </style> <body> <h2 style="color:green"> GeeksforGeeks </h2> <h4> D3.js | diverging.interpolator() Function </h4> <script> var diverging = d3.scaleDiverging() // Setting the interpolate function .interpolator(d3.interpolateSpectral) // Setting up the domain .domain([1, 0.5, 10]); // Default domain is used i.e [0, 1] document.write( "<p>diverging(0.1): ", diverging(0.1) + "</p>"); document.write( "<p>diverging(0.2): ", diverging(0.2) + "</p>"); </script> </body> </html>
Producción:
