Open In App

D3.js time.ticks() Function

The time.ticks() function is used to uniformly space dates that corresponds to the domain of the scale. The dates are always in the extent of the domain of the scale.

Syntax:



time.ticks( count )

Parameters: This function accepts a single parameter as mentioned above and described below:

Return Values: This function does not return anything.



Below programs illustrate the time.ticks() function in D3.js:

Example 1:




<!DOCTYPE html>
<html>
  
<head>
    <script src="https://d3js.org/d3.v4.min.js">
    </script>
    <script src="https://d3js.org/d3-color.v1.min.js">
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
  
    <p>time.ticks() Function </p>
  
    <script>
        var time = d3.scaleTime()
  
            // Set the number of ticks
            .ticks(4);
  
        // Display the time for each tick
        time.forEach(e => {
            document.write("<h3>" + e + "</h3>")
        });
    </script>
</body>
  
</html>

Output:

Example 2: Ticks every interval.




<!DOCTYPE html>
<html>
  
<head>
    <script src="https://d3js.org/d3.v4.min.js">
    </script>
    <script src="https://d3js.org/d3-color.v1.min.js">
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
  
    <p>time.ticks() Function </p>
  
    <script>
        var time = d3.scaleTime()
  
            // Set the domain of the time to scale  
            .domain([new Date(2000, 0, 10, 0),
            new Date(2000, 0, 10, 10)])
  
            // Set the number of ticks to every 2 hours
            .ticks(d3.timeHour.every(2))
  
        // Display the time for each tick
        time.forEach(e => {
            document.write("<h3>" + e + "</h3>")
        });
    </script>
</body>
  
</html>

Output:


Article Tags :