AshKeys

Confessions and Confusions of a Freelance Fullstacker.

Ashok Mannolu Arunachalam, How toJavaScriptd3
Back

How to get the tick values of an axis in d3

The more I explore D3.js the more I am intriguied by the ways to make Data-driven documents or charts.

In very recently, I had to make a rect at the center of a 2D map. But, the challenge I had in getting the axis tick values irrespective of zoom/pan levels.

To get the data of the axis, the following piece of code is enough:

js
const xAxisTickValues = d3.select('axis axis--x g').data()
const yAxisTickValues = d3.select('axis axis--y g').data()

Using the d3.quantile function we can get the center values as follows:

js
const minX = d3.quantile(xAxisTickValues, 0.25)
const maxX = d3.quantile(xAxisTickValues, 0.75)
const minY = d3.quantile(yAxisTickValues, 0.25)
const maxY = d3.quantile(yAxisTickValues, 0.75)