title: Redrawing SVG on resize
body: <p>I'm trying to redraw an SVG chart on window resize within d3, but without using the <code>viewBox</code> and <code>preserveAspectRatio</code> parameters (I didn't like how they treated text).</p>
  
  <p>I'm also trying to stick with d3's databinding design via Bostock's <a href="https://groups.google.com/d/msg/d3-js/Rlv0O8xsFhs/UpS4OqV3Zx8J" rel="noreferrer">suggestion</a> when appending a single element (not based on backed data).</p>
  
  <p>I have something that boils down to this (<a href="http://jsfiddle.net/lebolo/3dgn5pz8/" rel="noreferrer">jsFiddle</a>). However the SVG element's width/height never get updated.</p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div class="chart-container"&gt;
      &lt;button class="user-option"&gt;Some User Options&lt;/button&gt;
      &lt;div class="svg-container"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>Javascript</h2>
  
  <pre><code>$(window).on("resize", function () {
      draw();
  });
  
  function draw() {
      var container = d3.select('.chart-container');
      var drawWidth = Math.round(0.80 * container.node().clientWidth);
      var drawHeight = Math.round(drawWidth * (3 / 4)); // Fixing a 4/3 aspect ratio
  
      /*
       * Use an inner g element as the SVG canvas in order to set and forget margins.
       * See http://bl.ocks.org/mbostock/3019563
       */
      var margin = {
          top: 10,
          right: 30,
          bottom: 50,
          left: 40
      };
      var width = drawWidth - margin.left - margin.right;
      var height = drawHeight - margin.top - margin.bottom;
  
      var svg = container.select(".svg-container").selectAll('svg')
              .data([0]) // Single data element to create SVG if it doesn't exist
          .enter().append("svg")
              .attr("width", drawWidth)
              .attr("height", drawHeight)
          .append("g")
              .attr("class", "canvas")
              // jsFiddle doesn't translate correctly, maybe because of frames???
              .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
      console.debug(svg.node()); // null on resize???
  
      // Add some random SVG element
      svg.selectAll('rect')
              .data([0]) // Single data element to create SVG if it doesn't exist
          .enter().append('rect')
              .attr({
                  x: 0,
                  y: 0,
                  width: drawWidth - margin.right - margin.left,
                  height: drawHeight - margin.bottom - margin.top
              });
  }
  </code></pre>