Skip to content
Related Articles

Related Articles

D3.js axis.ticks() Function
  • Last Updated : 07 Aug, 2020
GeeksforGeeks - Summer Carnival Banner

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:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :