La función Continuous.range () en d3.js se usa para establecer el rango de la escala en la array de valores especificada que debe contener dos o más de dos valores. Los elementos en el rango pueden ser números o strings.
Sintaxis:
continuous.range([range]);
Parámetros: Esta función acepta un solo parámetro como se mencionó anteriormente y se describe a continuación.
- [rango]: esta es una array que contiene el rango para el dominio especificado.
Valores devueltos: esta función no devuelve nada.
Los siguientes ejemplos ilustran la función D3.js continuo.range() en JavaScript:
Ejemplo 1: cuando la array de rango es de una string de colores.
HTML
<!DOCTYPE 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>
<script src=
"https://d3js.org/d3-color.v1.min.js">
</script>
<script src=
"https://d3js.org/d3-interpolate.v1.min.js">
</script>
<script src=
"https://d3js.org/d3-scale-chromatic.v1.min.js">
</script>
</head>
<body style ="text-align: center">
<h2 style="color: green;">Geeksforgeeks</h2>
<p>D3.js continuous.range() Function </p>
<script>
var continuous = d3.scaleLinear()
// Domain ranges -1, 0, 1
.domain([-1, 0, 1])
// Range for the domain
.range(["red", "green", "blue"]);
document.write("<br/>")
document.write("<h3>"+continuous(0)+"</h3>");
document.write("<h3>"+continuous(1)+"</h3>");
document.write("<h3>"+continuous(0.5)+"</h3>");
document.write("<h3>"+continuous(-1)+"</h3>");
// Out of domain values
document.write("<h3>"+continuous(1.5)+"</h3>");
document.write("<h3>"+continuous(2)+"</h3>");
</script>
</body>
</html>
Producción:
Ejemplo 2: Cuando la array de rango es de tipo número.
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>
<script src=
"https://d3js.org/d3-color.v1.min.js">
</script>
<script src=
"https://d3js.org/d3-interpolate.v1.min.js">
</script>
<script src=
"https://d3js.org/d3-scale-chromatic.v1.min.js">
</script>
</head>
<body style ="text-align: center">
<h2 style="color: green;">Geeksforgeeks</h2>
<p>D3.js continuous.range() Function </p>
<script>
var continuous = d3.scaleLinear()
// Domain ranges -1, 0, 1
.domain([-1, 0, 1])
// Range for the domain
.range([1,2,3,4,5,6,7,8,9]);
document.write("<br/>")
document.write("<h3>"+continuous(0)+"</h3>");
document.write("<h3>"+continuous(1)+"</h3>");
document.write("<h3>"+continuous(0.5)+"</h3>");
document.write("<h3>"+continuous(-1)+"</h3>");
document.write("<h3>"+continuous(1.5)+"</h3>");
document.write("<h3>"+continuous(2)+"</h3>");
</script>
</body>
</html>
Producción:
