La función time.rangeRound() se utiliza para establecer el rango de la escala en la array de valores especificada junto con la configuración del interpolador para interpolarRound.
Sintaxis:
time.rangeRound([range]);
Parámetros: esta función acepta un parámetro que se proporciona arriba y se describe a continuación.
- range: este parámetro acepta una array de números o strings.
Valor devuelto: esta función no devuelve nada.
A continuación se dan algunos ejemplos de la función dada anteriormente.
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>
<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>
<style>
body {
margin-left: 40px;
}
h2 {
color: green;
}
div {
float: left;
width: 280px;
}
</style>
</head>
<body>
<h2>Geeks for geeks</h2>
<p>time.rangeRound() Function </p>
<script>
var time = d3.scaleTime()
// Setting domain for the scale.
.domain([1, 10])
// Setting the range of the scale.
.range([1, 100]);
document.write(
"<div><h3>Without time.rangeRound()</h3>");
document.write(
"<h3>time(1.5): " + time(1.5) + "</h3>");
document.write(
"<h3>time(2): " + time(2) + "</h3>");
document.write(
"<h3>time(3.5): " + time(3.5) + "</h3>");
document.write(
"<h3>time(4.5): " + time(4.5) + "</h3></div>");
var time = d3.scaleTime()
// Setting domain for the scale.
.domain([1, 10])
// Setting the range of the scale.
.rangeRound([1, 100]);
document.write(
"<div><h3>With time.rangeRound()</h3>");
document.write(
"<div><h3>time(1.5): " + time(1.5) + "</h3>");
document.write(
"<h3>time(2): " + time(2) + "</h3>");
document.write(
"<h3>time(3.5): " + time(3.5) + "</h3>");
document.write(
"<h3>time(4.5): " + time(4.5) + "</h3></div>");
</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>
<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>
<style>
body {
margin-left: 40px;
}
h2 {
color: green;
}
</style>
</head>
<body>
<h2>Geeks for geeks</h2>
<p>time.rangeRound() Function </p>
<script>
var time = d3.scaleTime()
// Setting domain for the scale.
.domain([2001 - 01 - 01, 2000 - 01 - 02])
.rangeRound([1, 10])
document.write("<h3>time(2.4): "
+ time(2.4) + "</h3>");
document.write("<h3>time(2): "
+ time(2) + "</h3>");
document.write("<h3>time(6.4): "
+ time(6.4) + "</h3>");
document.write("<h3>time(4.5): "
+ time(4.5) + "</h3>");
</script>
</body>
</html>
Producción:
