Skip to content
Related Articles
Get the best out of our app
GFG App
Open App
geeksforgeeks
Browser
Continue

Related Articles

D3.js axisBottom() Function

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

Axes can be drawn using built-in D3 functions. This is made of Lines, Ticks and Labels. The d3.axisBottom() function in D3.js is used to create a bottom horizontal axis. This function will construct a new bottom-oriented axis generator for the given scale, with empty tick arguments, a tick size of 6 and padding of 3.

Axis API can be configured using the following script.

<script src = "https://d3js.org/d3-axis.v1.min.js"></script>

Syntax:

d3.axisBottom(scale)

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

  • scale: This parameter holds the used scale.

Return Value: This function returns the created bottom horizontal axis.

Below programs illustrate the d3.axisBottom() 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>
</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, 100])
            .range([0, width - 50]);
  
        var x_axis = d3.axisBottom(xscale);
  
        svg.append("g")
            .attr("transform", "translate(20,100)")
            .call(x_axis)
    </script>
</body>
  
</html>


Output:

Example 2:

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 data = [10, 12, 14, 16, 18, 20];
        var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
  
        var xscale = d3.scaleLinear()
            .domain([d3.min(data), d3.max(data)])
            .range([0, width - 60]);
  
        var x_axis = d3.axisBottom(xscale);
  
        var xAxisTranslate = height / 2;
  
        svg.append("g")
            .attr("transform", "translate(50, "
            + xAxisTranslate + ")")
            .call(x_axis)
    </script>
</body>
  
</html>


Output:


My Personal Notes arrow_drop_up
Last Updated : 28 Jul, 2020
Like Article
Save Article
Similar Reads
Related Tutorials