title: D3 position x axis label within rectangle and rotate 90 degrees
body: <p>I am using D3 to create a basic bar graph</p>
  
  <p>For my x-axis, I want to position each label above their respective bar. The text should also be rotated 90 degrees</p>
  
  <p>To see the code that does this, start at line 51. <a href="https://codepen.io/Fallenstedt/pen/xdYooE" rel="nofollow noreferrer">https://codepen.io/Fallenstedt/pen/xdYooE</a></p>
  
  <pre><code>//This is where I attempt to create an x Axis label
  //create a container to hold the text element
  var textContainer = svg.append('g')
    .selectAll('g')
    .data(data).enter()
    .append('g')
    .attr('class', 'x-axis')
    .attr('x', function(d, i) {
      return i * (width/data.length)
    })
    .attr('y', function(d, i) {
      return height - (d.value) + 15;
    })
    .attr("transform", function(d, i) {return "translate(" + (i * (width/data.length)) + ",330)";});
  
  
  //now that a container is made, I can append a text element to it so I can rotate the text 90 degrees.
  textContainer.append('text')
    .text(function(d) {
      return d.type
    })
    .attr('font-size', '34px')
    .attr('fill', 'white')
    .attr("text-anchor","end")
    .attr("transform", function(d, i) {return "translate(40,0) rotate(-90,0,0)";});
  </code></pre>
  
  <p>The labels appear and they are rotated 90 degrees, however I cannot position them to be above their respective rectangle. How can I position each x-axis label to be directly above their rectangle? I feel that my approach to this is overly complicated.</p>