title: Fit svg inside of div and automatically scale svg if size of div changes
body: <p>I’m trying to fit a line chart into a div.  I’m having a hard time fitting the entire chart, including x and y axes into the div.  The x axis always ends up being hidden beyond the bottom extents of the div.  I would like the chart, including the axes, to be visible and to automatically scale and fit into the container div, even if the dimensions of the div change.  In other words, I’d like it to behave just like a chart in Microsoft Excel.</p>
  
  <p>This is the JavaScript.  I think I’m fundamentally misunderstanding the viewBox attribute</p>
  
  <pre><code>//get width and height of container div    
  var div_w = d3.select("#container").style("width").split("px").shift();
  var div_h = d3.select("#container").style("height").split("px").shift();
  
  // Add an SVG element with the desired dimensions and margin.
  var graph = d3.select("#container”)
      .append("svg:svg")
      .attr("viewBox","0 0 " + div_w +" " + div_h)
      .attr("preserveAspectRatio", "xMinYMin meet")
      .append("svg:g")
      .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
  
  //Here is the resulting html
  &lt;div  class=”container”&gt;
      &lt;svg&gt;
          &lt;g&gt;
              &lt;g class=”x axis”&gt;
                  &lt;g class=”tick”
                      &lt;line  attributes…..
                      &lt;text attributes…..
                  &lt;/g&gt;
          &lt;/g&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I was looking in the wrong place for this solution.  Later on in the code, when the x-axis was appended to the div container, I moved the axis down h units (h is the height of the div container) by using the transform attribute, hence the axis would end up below the bottom extents of the container.  Needed only to move it down h-m[1] units (height - bottom margin).  This at least takes care of the x-axis visibility issue.  Haven't tackled the re-sizing with the div issue.</p>
  
  <pre><code>    //WRONG WAY    
      // Add the x-axis.
          graph.append("svg:g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + h + ")")
                .call(xAxis);
  
      //RIGHT WAY
      // Add the x-axis.
          graph.append("svg:g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + (h-m[1]) + ")")
                .call(xAxis);
  </code></pre>