title: Creating axis from array of strings in D3?
body: <p>I've created a basic bar chart in d3 from an array of integers.</p>
  
  <pre><code>  let maxWidth = $('body').width();
  
    let chartWidth = maxWidth * 0.75; // also arbitrary
    let chartHeight = chartWidth / _GoldenRatio;
  
    let barWidth = (chartWidth / dataArray.length) - horizontalSpacing;
  
    let barHeightUnit = chartHeight / d3.max(dataArray);
  
    let mainChart = d3.select(containerSelector)
      .append('svg')
      .attr('width', chartWidth)
      .attr('height', chartHeight);
  
    mainChart.selectAll("rect")
      .data(dataArray)
      .enter()
      .append("rect")
      .attr("class", "bar")
      .attr("height", function(d, i) { return (d * barHeightUnit) })
      .attr("width",barWidth)
      .attr("x", function(d, i) { return i * (barWidth + horizontalSpacing) + horizontalSpacing })
      .attr("y", function(d, i) { return chartHeight - (d * barHeightUnit) });
  </code></pre>
  
  <p>I do this a few times with a few different arrays. Each list of integers corresponds with a list of strings that I'd like to display along the x-axis. Each string will lie below one bar to label it.</p>
  
  <p>I can't figure out a way to do this easily with d3 or d3-axis. What is an easy way to construct an axis from this list of strings?</p>