Home » Axis API in D3.js

Axis API in D3.js

by Online Tutorials Library

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.

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()).

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:

Output:

Axis API in D3.js

Example 3:

Let’s get the above two mentioned axes together:

Output:

Axis API in D3.js


You may also like