title: How to make ordinal tick labels adjust automatically in D3
body: <p>As you can see in the example, the tick labels on an ordinal axis (scale) become crowded and illegible as the domain grows. How can I make them adjust automatically as they would on a linear axis? </p>
  
  <p>(I suppose I could use a linear scale instead, but <a href="https://stackoverflow.com/questions/10284453/how-do-i-specify-domain-in-d3-scale-ordinal">this question</a> and the answer from Mike Bostock himself suggest that the ordinal scale is more appropriate for this type of data. After all, the domain is discrete and I'm making a modified bar chart, where a convenient padding setting is useful.)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var x0 = d3.scaleBand()
    .domain(d3.range(1,6))
    .range([0,200]);
  
  var x = d3.scaleBand()
    .domain(d3.range(1,51))
    .range([0,200]);
  
  var xLinear = d3.scaleLinear()
    .domain([1,50])
    .range([0,200]);
  
  d3.select('svg').append('g')
    .attr('transform', 'translate(10,10)')
    .call(d3.axisBottom(x0));
  
  d3.select('svg').append('g')
    .attr('transform', 'translate(10,50)')
    .call(d3.axisBottom(x));
  
  d3.select('svg').append('g')
    .attr('transform', 'translate(10,100)')
    .call(d3.axisBottom(xLinear));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;
  &lt;svg width='300' height='150'&gt;&lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>