The tickIncrement() function of D3.js is used whenever one needs to be sure that the start is always less than the stop where the start and stop are given as a parameter in this function. If the tick step for the given start, stop and count is less than one then it returns the negative inverse tick step.
Syntax:
d3.tickIncrement(start, stop, count)
Parameter: This function accepts three parameters as mentioned above and describe below.
- start: It is the starting value from where we want the array element, it is inclusive.
- stop: It is the starting value to which we want the array element to be, it is inclusive.
- count: It is the number of elements we want in a given start and stop range.
Return value: It returns an integer.
Example 1: When start is greater than 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"
</ 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 >
|
Output:
Example 2: When the tick step is less than one:
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"
</ 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 >
|
Output: