La función tickIncrement() de D3.js se usa siempre que uno necesita estar seguro de que el inicio siempre es menor que la parada donde el inicio y la parada se dan como parámetro en esta función. Si el paso de tick para el inicio, parada y conteo dado es menor que uno, entonces devuelve el paso de tick inverso negativo.
Sintaxis:
d3.tickIncrement(start, stop, count)
Parámetro: Esta función acepta tres parámetros como se mencionó anteriormente y se describe a continuación.
- start: Es el valor inicial desde donde queremos el elemento del array, 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 fin.
Valor devuelto: Devuelve un número entero.
Ejemplo 1: Cuando start es mayor que stop:
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>
// What ever the count is it will
// always give NaN as output because
// stop is less than start
let s = d3.tickIncrement(10, 5, 1);
console.log("The output for start:10"
+ " and stop:5 is: ", s);
s = d3.tickIncrement(100, -50, 1);
console.log("The output for start:100"
+ " and stop:-50 is: ", s);
s = d3.tickIncrement(100, 5, 1);
console.log("The output for start:150"
+ " and stop:15 is: ", s);
</script>
</body>
</html>
Producción:
Ejemplo 2: cuando el paso de tick es menor que uno:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
</head>
<body>
<!--fetching from CDN of D3.js -->
<script type="text/javascript"
src="https://d3js.org/d3.v4.min.js">
</script>
<script>
// If count is so large such that
// the tick value is less than one
// it gives the negative number
let s = d3.tickIncrement(10, 50, 1000);
console.log("The output for start:10 and"
+ " stop:50 for count 1000 is: ", s);
s = d3.tickIncrement(100, 150, 10);
console.log("The output for start:100 and"
+ " stop:150 for count 10 is: ", s);
s = d3.tickIncrement(100, 500, 1000);
console.log("The output for start:150 and"
+ " stop:500 for count 1000 is: ", s);
</script>
</body>
</html>
Producción:
