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:
<!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>
Output:
Example 2: When the tick step is less than one:
<!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>
Output:
