La función time.ticks() se usa para espaciar uniformemente las fechas que corresponden al dominio de la escala. Las fechas están siempre en la extensión del dominio de la escala.
Sintaxis:
time.ticks( count )
Parámetros: esta función acepta un solo parámetro como se mencionó anteriormente y se describe a continuación:
- count: Es el número de ticks requeridos. Es un parámetro opcional.
Valores devueltos: esta función no devuelve nada.
Los siguientes programas ilustran la función time.ticks() en D3.js:
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<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>
<h1 style="color: green">GeeksforGeeks</h1>
<p>time.ticks() Function </p>
<script>
var time = d3.scaleTime()
// Set the number of ticks
.ticks(4);
// Display the time for each tick
time.forEach(e => {
document.write("<h3>" + e + "</h3>")
});
</script>
</body>
</html>
Producción:
Ejemplo 2: marca cada intervalo.
HTML
<!DOCTYPE html>
<html>
<head>
<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>
<h1 style="color: green">GeeksforGeeks</h1>
<p>time.ticks() Function </p>
<script>
var time = d3.scaleTime()
// Set the domain of the time to scale
.domain([new Date(2000, 0, 10, 0),
new Date(2000, 0, 10, 10)])
// Set the number of ticks to every 2 hours
.ticks(d3.timeHour.every(2))
// Display the time for each tick
time.forEach(e => {
document.write("<h3>" + e + "</h3>")
});
</script>
</body>
</html>
Producción:
