title: Responsive graphs: Get width and height of axis, so graph can take up remaining size of a container
body: <p>tl;dr, solve for the x-axis and y-axis dimensions.</p>
  
  <p>Container dimensions:
  Height: 500px
  Width: 500px</p>
  
  <p>X Axis dimensions:
  <strong>Height: ?
  Width: ?</strong></p>
  
  <p>Y Axis dimensions:
  <strong>Height: ?</strong>
  <strong>Width: ?</strong></p>
  
  <p>Graph dimensions:
  Height: container.height - xAxis.height;
  Width:  container.width - yAxis.width;</p>
  
  <p><strong>Details:</strong> </p>
  
  <p>A user uploads data, and my application creates a graph. The graph and axis should render nicely in a 500px square container. This is easy, until we add axises. The axis vary in width (y-axis text) or height (x-axis text if it's rotated vertical). </p>
  
  <p>I haven't seen any examples yet that start with a container size, subtract the axis sizes, and then render the graph in the remainder. (container - axis = graph dimensions). How can this be accomplished? </p>
  
  <p>The problem is d3.svg.axis() needs a scale. This scale uses a d3.scale.range(), which uses your graph height. The problem is the graph height is (container height - x axis height).  And we can't calculate the x-axis since it depends on the y-axis width! </p>
  
  <p>I've considered one solution, which is take the maximum bounding box for all the text that <em>could</em> make up the ticks, then add in the height or width of the axis line. Obviously this can be a huge calculation in a large dataset. I can do some smart things like find the maximum and hope it's the longest in pixels. However, this all seems messy, and I'm sure it's a problem anyone creating dynamic graphs would have run into.</p>