title: Title and Axis labels
body: <p>I have been successful in creating labels for both the X and Y axis. I have also been successful in adding a title to the graph. My problem is that if I modify the margins of the graph, the label positions get messed up.  </p>
  
  <p><strong>Snippet of where I change the margins of the graph:</strong>  </p>
  
  <pre><code>    var margin = {top: 60, right: 60, bottom: 60, left:120}  
  </code></pre>
  
  <p><strong>Snippet of where I create the labels:</strong>  </p>
  
  <pre><code>    //Create Title 
      svg.append("text")
      .attr("x", w / 2 )
      .attr("y", 0)
      .style("text-anchor", "middle")
      .text("Title of Diagram");
  
      //Create X axis label   
      svg.append("text")
      .attr("x", w / 2 )
      .attr("y",  h + margin.bottom)
      .style("text-anchor", "middle")
      .text("State");
  
      //Create Y axis label
      svg.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 0-margin.left)
      .attr("x",0 - (h / 2))
      .attr("dy", "1em")
      .style("text-anchor", "middle")
      .text("Revenue");  
  </code></pre>
  
  <p><strong>JsFiddle:</strong><br>
  <a href="http://jsfiddle.net/u63T9/" rel="nofollow">http://jsfiddle.net/u63T9/</a>  </p>
  
  <p><strong>Here is another alternative, that I'm willing to live with:</strong><br>
  I am basically leveraging the scales to find a base coordinate. I then add or take a little until I am happy with the location. This method actually keeps up with changes in the margins.</p>
  
  <pre><code>    //Create title 
      svg.append("text")
      .attr("x", w / 2 )
      .attr("y",  yScale(d3.max(input, function(d) { return d.CustomerCount; })) - 20 )
      .style("text-anchor", "middle")
      .text("Title of Graph");
  
      //Create X axis label   
      svg.append("text")
      .attr("x", w / 2 )
      .attr("y",  yScale(0) + 40 )
      .style("text-anchor", "middle")
      .text("State");
  
      //Create Y axis label
      svg.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", xScale(0) - 80 )
      .attr("x",0 - (h / 2))
      .attr("dy", "1em")
      .style("text-anchor", "middle")
      .text("Revenue"); 
  </code></pre>