CODEWITHSUNDEEP
javascriptd3.jssvgdata-visualization
Aman Verma
Aman Verma

Reputation: 320

d3 axes behaving strangely with a pow scale

I am learning data visualization with d3.js, The following scale behaves strangely with d3.svg.axis

var scaleFunc = d3.scale.pow()
    .exponent(1.6)
    .domain(d3.extent(arr, numFunc)) // numfunc returns float between 0 - 5
    .range([ ( maxPlotHeight -axes.bufferBottom ), axes.bufferTop ])

Axis function :

d3.svg.axis()
    .scale(scaleFunc)
    .orient("left")
    .ticks(5)

If the extent in scale starts from 0 it works but with only 4 ticks, and if the extent start from anything above 0 ( like 1.2, 1.4 ) it shows 6 ticks with values : .5, .0, .5, .0, .5, .0

somewhat working y-axis image

broken y-axis image

Please help me understand the problem

Upvotes: 1

Views: 352

Answers (1)

altocumulus
altocumulus

Reputation: 21578

From the docs on axis.ticks([arguments…])

The arguments will later be passed to scale.ticks to generate tick values

and for pow.ticks([count])

The specified count is only a hint; the scale may return more or fewer values depending on the input domain.

This is why you are not getting the exact number of ticks as you might have expected when calling .ticks(5).

The series of tick values .5, .0,... is most likely caused since there is not enough space to the left to display the entire number. Therefore, you will only see the decimal separator and the fractional part, whereas the integer part in front of the dot is cut off. Try translating everything to the right to allow for a wider margin to be able to display the tick values.

Upvotes: 2

Related Questions