Open In App

d3.tickIncrement() Function

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.

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:


Article Tags :