title: Formatting labels for x-axis in D3js
body: <p>I am trying to create some bar charts using d3js. I am using a same js as a template and passing different data to show the charts. In cases if their are less 10 data points the x-axis labels look fine. But if their are more than 10 data points the x-axis labels are overlapping and clustered. So I was trying to identify a way where in I could skip every 4 ticks .Below is the code. It doesnt show any ticks at all when greater than 9 data points.</p>
  
  <p>` var ticks = d3.selectAll(".tick text");</p>
  
  <pre><code>               function tickLabels(dataLength, d) {
                     if (dataLength &lt; 9) return "";
                     return  ticks.attr("class", function(d,i){
                         if(i%3 != 0) d3.select(this).remove();
                     })
                   }
  
                var xAxis = d3.axisBottom().scale(x)
                                  .ticks()
                                  .tickFormat(function(d,i) {  return tickLabels(all.length, d) })
  
               `
  </code></pre>