javascript - d3 axes behaving strangely with a pow scale -


i learning data visualization d3.js, following scale behaves strangely 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 extent in scale starts 0 works 4 ticks, , if extent start above 0 ( 1.2, 1.4 ) shows 6 ticks values : .5, .0, .5, .0, .5, .0

somewhat working y-axis image

broken y-axis image

please me understand problem

from docs on axis.ticks([arguments…])

the arguments later passed scale.ticks generate tick values

and pow.ticks([count])

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

this why not getting exact number of ticks might have expected when calling .ticks(5).

the series of tick values .5, .0,... caused since there not enough space left display entire number. therefore, see decimal separator , fractional part, whereas integer part in front of dot cut off. try translating right allow wider margin able display tick values.


Comments

Popular posts from this blog

php - Invalid Cofiguration - yii\base\InvalidConfigException - Yii2 -

How to show in django cms breadcrumbs full path? -

ruby on rails - npm error: tunneling socket could not be established, cause=connect ETIMEDOUT -