The tickStep() function in D3.js is used to return the difference between the adjacent tick values in the array.
Syntax:
tickStep(start,stop,count);
Parameters: This function accepts three parameters as mentioned above and described below:
- start: It is the starting value from where we want the array element to be, 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 stops range.
Return value: It returns that step value in floating point representation.
Below given are a few examples of ticks() function
Example 1:
<!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>
Output:
Example 2:
<!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>
Output:
Example 3: If the stop is less then start
<!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>
Output:
