Axis API in D3.js

by Online Tutorials Library July 14, 2022

Axis API in D3.js

D3 facilitates the functions to design the axes. It is a build-up of Labels, Ticks, and Lines. An axis can also apply a Scale. Thus, the entire axis will require any scale to implement.

Configuring API

We can use the following mentioned script to configure this API.

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

Methods of Axis API

D3 facilitates some essential functions to design the axes, which are discussed below.

d3.axisTop(): It is a method/function applied to draw the horizontal axis on the top.

d3.axisRight(): It can be used to draw a vertical axis, i.e., right-oriented.

d3.axisBottom(): It is used to draw a horizontal axis at the bottom.

d3.axisLeft(): This method is applied to draw the vertical axis on the left.

Let’s understand by a few examples.

Example 1:

To include the x-axis on a graph (using d3.axisBottom()).

  <!DOCTYPE html>  <html>  <head>  <script src=”https://d3js.org/d3.v4.min.js”></script>  </head>  <body>  <script>  var width = 400,  height = 100;  var data = [10, 15, 20, 25, 30];  // Append the SVG   var svg = d3.select(“body”)  .append(“svg”)  .attr(“width”, width)  .attr(“height”, height);  // Create the scale  var scale = d3.scaleLinear()  .domain([d3.min(data), d3.max(data)])  .range([0, width – 100]);  // Add the scales to an axis  var x_axis = d3.axisBottom()  .scale(scale);  //Append the group and add axis  svg.append(“g”)  .call(x_axis);  </script>  </body>  </html>  

Output

Axis API in D3.js

Example 2:

Let’s understand how to include the y-axis on a graph (using d3.axisLeft()) in the following illustration:

  <!DOCTYPE html>  <html>  <head>  <script src=”https://d3js.org/d3.v4.min.js”></script>  </head>  <body>  <script>  var width = 400, height = 400;  var data = [10, 15, 20, 25, 30];  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(50, 10)”)  .call(y_axis);  </script>  </body>  </html>  

Output:

Axis API in D3.js

Example 3:

Let’s get the above two mentioned axes together:

  <!DOCTYPE html>  <html>  <head>  <script src=”https://d3js.org/d3.v4.min.js”></script>  </head>  <body>  <script>  var width = 400, height = 400;  var data = [10, 15, 20, 25, 30];  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:

Axis API in D3.js

Next TopicSelection API in D3.js

animation in d3.js benefits of d3.js concepts of d3.js d3.js graphs d3.js installation features of d3.js what is d3.js

Axis API in D3.js

Axis API in D3.js

Configuring API

Methods of Axis API

Margin vs Padding

Dijkstra’s Algorithm

You may also like