Open In App

D3.js axis.ticks() Function

Improve
Improve
Like Article
Like
Save
Share
Report

The d3.axis.ticks() Function in D3.js is used to control which ticks are displayed by the axis. This function returns the axis generator

Syntax:

axis.ticks(arguments…)
axis.ticks([count[, specifier]])
axis.ticks([interval[, specifier]])

Parameters: This function accepts the following parameters.

  • count/interval: This parameter is used to display the number of ticks.
  • specifier: This parameter is an optional format specifier to customize how the tick values are formatted.

Return Value: This function returns the axis generator.

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

Example 1:




<!DOCTYPE html> 
<html
  
<head
    <title
        D3.js | D3.axis.ticks() Function 
    </title
    <script type="text/javascript"
        src="https://d3js.org/d3.v4.min.js"
    </script
      
    <style
        svg text { 
            fill: green; 
            font: 15px sans-serif; 
            text-anchor: center; 
        
    </style
</head
  
<body
    <script
        var width = 400, height = 400; 
        var svg = d3.select("body") 
            .append("svg") 
            .attr("width", width) 
            .attr("height", height); 
  
        var xscale = d3.scaleLinear() 
            .domain([0, 10]) 
            .range([0, width - 60]); 
  
        var x_axis = d3.axisBottom().scale(xscale).ticks(5); 
  
        var xAxisTranslate = height / 2; 
  
        svg.append("g") 
            .attr("transform", "translate(50, " 
            + xAxisTranslate + ")") 
            .call(x_axis) 
    </script
</body
</html>


Output:

Example 2:




<!DOCTYPE html> 
<html
  
<head
    <title
        D3.js | d3.axis.ticks() Function 
    </title
    <script type="text/javascript"
        src="https://d3js.org/d3.v4.min.js"
    </script
      
    <style
        svg text { 
            fill: green; 
            font: 15px sans-serif; 
            text-anchor: end; 
        
    </style
</head
  
<body
    <script
        var width = 400, height = 400; 
        var svg = d3.select("body") 
            .append("svg") 
            .attr("width", width) 
            .attr("height", height); 
  
        var yscale = d3.scaleLinear() 
            .domain([0, 1]) 
            .range([height - 50, 0]); 
  
        var y_axis = d3.axisLeft().scale(yscale).ticks(3, "$.2f"); 
  
  
        svg.append("g") 
            .attr("transform", "translate(100, 20)") 
            .call(y_axis) 
    </script
</body
</html>


Output:



Last Updated : 07 Aug, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads