Axis API in D3.js

The axis provide some human-readable marks used for reference scaling. A graph contains two axes; x-axis (Horizontal axis) and y-axis (vertical axis). D3.js brings some functions that help you to create the axes. An axis is a combination of Lines, Labels, and Ticks. An axis is also containing a scale, so an axis always require a scale to manipulate.

Configuration of Axis API

You can configure the above API with the help of the following script.

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

</script>

<script></script>

Axis API Methods

Here, we have some important functions/ methods served by D3.js to create an axis API explained below.

d3.axisTop()

This method can be applied if you want to design a top horizontal axis.

d3.axisBottom()

You can apply this method if you want to produce a bottom horizontal axis.

d3.axisRight()

This function can be used to create a right-oriented vertical axis.

d3.axisLeft()

This method can be applied to generate a vertical axis on the left side.

Now, some examples are explained below to understand the axis API methods.

Example of d3.axisBottom() method

Here, we have an example of designing a graph on the x-axis.

<!DOCTYPE html> 

<html> 

<head> 

<script src=”https://d3js.org/d3.v4.min.js”></script> 

</head> 

<body> 

<script> 

var width = 600, 

height = 800; 

var data = [20, 25, 30, 35, 40];   

var svg = d3.select(“body”)                      // Append the SVG elements

.append(“svg”) 

.attr(“width”, width) 

.attr(“height”, height); 

var scale = d3.scaleLinear()                        // Create the scale   

.domain([d3.min(data), d3.max(data)]) 

.range([0, width – 10]);   

var x_axis = d3.axisBottom()                    // Add the scales to an axis 

.scale(scale); 

svg.append(“g”)                                          //Append the group and add axis   

.call(x_axis); 

</script> 

</body> 

</html> 

Output

After the successful execution of the above example code, you got the following output.

Example of d3.axisLeft() Method

Here, we have an example to design a graph on the y-axis.

<!DOCTYPE html> 

<html> 

<head> 

<script src=”https://d3js.org/d3.v4.min.js”></script> 

</head> 

<body> 

<script> 

var width = 800, height = 600; 

var data = [30, 45, 50, 65, 70]; 

var svg = d3.select(“body”) 

.append(“svg”) 

.attr(“width”, width) 

.attr(“height”, height); 

var scale = d3.scaleLinear() 

.domain([d3.min(data), d3.max(data)]) 

.range([height/2, 0]); 

var y_axis = d3.axisLeft() 

.scale(scale); 

svg.append(“g”) 

.attr(“transform”, “translate(80, 40)”) 

.call(y_axis); 

</script> 

</body> 

</html> 

Output

You got the following output, after the successful execution of the code.

Example

In this example, we are going to combine the above-explained axes.

<!DOCTYPE html> 

<html> 

<head> 

<script src=”https://d3js.org/d3.v4.min.js”></script> 

</head> 

<body> 

<script> 

var width = 600, height = 500; 

var data = [40, 55, 70, 85, 100]; 

var svg = d3.select(“body”) 

.append(“svg”) 

.attr(“width”, width) 

.attr(“height”, height); 

var xscale = d3.scaleLinear() 

.domain([0, d3.max(data)]) 

.range([0, width – 100]); 

var yscale = d3.scaleLinear() 

.domain([0, d3.max(data)]) 

.range([height/2, 0]); 

var x_axis = d3.axisBottom() 

.scale(xscale); 

var y_axis = d3.axisLeft() 

.scale(yscale); 

svg.append(“g”) 

.attr(“transform”, “translate(50, 10)”) 

.call(y_axis); 

var xAxisTranslate = height/2 + 10; 

svg.append(“g”) 

.attr(“transform”, “translate(50, ” + xAxisTranslate  +”)”) 

.call(x_axis) 

</script> 

</body> 

</html>    

Output

After the compilation of the following results, you got the following output.

Pin It on Pinterest

Share This