Open In App

D3.js axis.tickValues() Function

Improve
Improve
Like Article
Like
Save
Share
Report

The d3.axis.tickValues() Function in D3.js is used to generate ticks at specific values. This function returns the current tick values, which defaults to null.

Syntax:

axis.tickValues([values])

Parameters: This function accepts the following parameters.

  • values: This parameter is used for ticks rather than using the scale’s automatic tick generator

Return Value: This function returns ticks at specific values.

Note: The explicit tick values take precedent over the tick arguments set by axis.tickArguments.

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

Example 1:




<!DOCTYPE html> 
<html
  
<head
    <title
        D3.js | D3.axis.tickValues() 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(xscale)
        .tickValues([2, 4, 6, 7]); 
  
        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.tickValues() 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 yscale = d3.scaleLinear() 
            .domain([0, 1]) 
            .range([height - 50, 0]); 
  
        var y_axis = d3.axisLeft()
        .scale(yscale).tickValues([ 0, 0.5, 1]); 
  
  
        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