D3.js - Autoresize of y axis labels

Question

I created a chart with D3.js as following which is displayed on the left (null margin) of my webpage but the y axis' labels are not displayed completely :

How to avoid this and show the complete labels (10,000 for example) ? Do I have to increase the size of the SVG ? Decrease the one of the text ? Would you have some piece of code please ?

Do you need further information ?

Thanks in advance !

Answer 1

It is likely your labels are starting outside the viewable area of the svg element. You can apply, for example an attr('transform','translate(x,y)') where x is the horizontal translation, and y , the vertical (likely y=0 in this case).

It is also possible and perhaps preferable to set the domain of the plot to start a bit further to the right, eg,

d3.scaleLinear()
  .domain(min,max)
  .range(x1,x2)

again where x1 is your the pixel at which min appears and x2 is the pixel value for max