Skip to content
Related Articles

Related Articles

D3.js svg.axis() Function
  • Last Updated : 29 Jul, 2020

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:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :