La función tickStep() en D3.js se usa para devolver la diferencia entre los valores de tick adyacentes en la array.
Sintaxis:
tickStep(start,stop,count);
Parámetros: esta función acepta tres parámetros, como se mencionó anteriormente y se describe a continuación:
- inicio: Es el valor inicial desde donde queremos que esté el elemento del arreglo, es inclusivo.
- stop: Es el valor inicial al que queremos que esté el elemento del array, es inclusivo.
- count: Es el número de elementos que queremos en un determinado rango de inicio y detención.
Valor devuelto: Devuelve ese valor de paso en representación de coma flotante.
A continuación se dan algunos ejemplos de la función ticks()
Ejemplo 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>D3 tickStep() Function</title>
</head>
<body>
<!--fetching from CDN of D3.js -->
<script type = "text/javascript"
src = "https://d3js.org/d3.v4.min.js">
</script>
<script>
// Choosing 10 elements in a range
let step=d3.tickStep(10, 20, 10);
console.log("Difference between each tick value is: ",step);
</script>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--fetching from CDN of D3.js -->
<script type = "text/javascript"
src = "https://d3js.org/d3.v4.min.js">
</script>
<script>
// Choosing 1000 elements in a range
let step=d3.tickStep(10, 15, 1000);
console.log("Difference between"+
" each tick value is: ",step);
</script>
</body>
</html>
Producción:
Ejemplo 3: Si la parada es menor entonces empieza
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--fetching from CDN of D3.js -->
<script type = "text/javascript"
src = "https://d3js.org/d3.v4.min.js">
</script>
<script>
// Choosing 1000 elements in a range
let step=d3.tickStep(10, 5, 1000);
console.log("Difference between"+
" each tick value is: ",step);
</script>
</body>
</html>
Producción:
