Open In App

D3.js axis.scale() Function

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The d3.axis.scale() Function in D3.js is used to sets the scale and return the axis. If this function is not provided with a specified scale, returns the current scale.

Syntax:

axis.scale([scale])

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

  • scale: This parameter is an optional parameter and it holds the used scale.

Return Value: This function returns the axis.

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

Example 1:

HTML




<!DOCTYPE html> 
<html
  
<head
    <title
        D3.js | d3.axisBottom() 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); 
  
        var xAxisTranslate = height / 2; 
  
        svg.append("g") 
            .attr("transform", "translate(50, " 
            + xAxisTranslate + ")") 
            .call(x_axis) 
    </script
</body
</html>


Output:

Example 2:

HTML




<!DOCTYPE html> 
<html
  
<head
    <title
        D3.js | d3.axisRight() 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: start; 
        
    </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, 10]) 
            .range([height - 50, 0]); 
  
        var y_axis = d3.axisRight().scale(yscale); 
  
  
        svg.append("g") 
            .attr("transform", "translate(100,20)") 
            .call(y_axis) 
    </script
</body
</html>


Output:



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