The d3.svg.axis() Function in D3.js is used to create a new default axis. This function will construct a new axis on this axis, various operations can be performed.
Syntax:
d3.svg.axis()
Parameters: This function does not accept any parameter.
Return Value: This function returns the created an axis.
Below programs illustrate the d3.svg.axis() function in D3.js:
Example 1:
HTML
<html>   <head>     <title>         D3.js | d3.axisLeft() Function     </title>     <script src="//d3js.org/d3.v3.min.js"></script> </head>   <body>     <script>         var svg = d3.select("body").append("svg")             .attr("width", 400)             .attr("height", 400);           // Create the Scale we will use         // for the Axis         var axisScale = d3.scale.linear()             .domain([0, 100])             .range([0, 300]);           // Create the Axis         var xAxis = d3.svg.axis()             .scale(axisScale);           // Create an SVG group Element for         // the Axis elements and call the         // xAxis function         svg.append("g")             .attr("transform", "translate(50, 50)")             .call(xAxis);     </script> </body>   </html> |
Output:
Example 2:
HTML
<html>   <head>     <title>         D3.js | d3.axisLeft() Function     </title>     <script src="//d3js.org/d3.v3.min.js"></script> </head>   <body>     <script>         var svg = d3.select("body").append("svg")             .attr("width", 400)             .attr("height", 400);           // Create the Scale we will use for the Axis         var axisScale = d3.scale.linear()             .domain([0, 100])             .range([300, 0]);           // Create the Axis         var xAxis = d3.svg.axis()             .scale(axisScale);           // Create an SVG group Element for the         // Axis elements and call the xAxis function         svg.append("g")             .attr("transform", "translate(50, 50)")             .call(xAxis);     </script> </body>   </html> |
Output:

