Why doesn't this D3 chart redraw when I repeatedly call it's original draw function?
<p>I'm trying to create a dashboard with resizable charts using the D3.js library.
To do this I'm creating the chart SVG elements within DIVs, and those DIVs are made resizable using the jQuery-ui <code>.resizable</code> class.</p>

<p>The DIV's resized event is monitored by another library (css-element-queries) and fires per-pixel, which should call my drawGraph() function and redraw the graph in proportion to it's parent DIV, but this doesn't happen and I'm not sure why. Am I doing something stupid?</p>

<p>See this fiddle:  <a href="https://jsfiddle.net/Hoppertron/ymf90p6v/17/" rel="nofollow">https://jsfiddle.net/Hoppertron/ymf90p6v/17/</a></p>

<p>By the way, I know that in production I would want to throttle this redraw event - I'm just trying to get it working first.</p>

<p>Here's the code:</p>

<pre><code>&lt;body&gt;
  &lt;div id="div1" class="container resizable draggable"&gt;
    &lt;svg id="chart1" class="chart"&gt;&lt;/svg&gt;

    &lt;script&gt;
      //Watches for div resize event (using ResizeSensor.js) and calls drawGraph() to redraw SVG
      var element = document.getElementById('div1');
      new ResizeSensor(element, function(element) {
        var chartWidth = $("#div1").width(),
          chartHeight = $("#div1").height();
        drawGraph(chartWidth, chartHeight)
      });

    &lt;/script&gt;
  &lt;/div&gt;

  &lt;script&gt;
    //Calls drawGraph() on initial page load
    var chartWidth = $("#div1").width(),
      chartHeight = $("#div1").height();
    $(function() {
      drawGraph(chartWidth, chartHeight);
    });

  &lt;/script&gt;

&lt;/body&gt;

&lt;script&gt;
  function drawGraph(width, height) {

    var data = [4, 8, 15, 16, 23, 42];

    var barHeight = height / data.length;

    var x = d3.scale.linear()
      .domain([0, d3.max(data)])
      .range([0, width]);

    var chart = d3.select(".chart")
      .attr("width", width)
      .attr("height", height);

    var bar = chart.selectAll("g")
      .data(data)
      .enter().append("g")
      .attr("transform", function(d, i) {
        return "translate(0," + i * barHeight + ")";
      });

    bar.append("rect")
      .attr("width", x)
      .attr("height", barHeight - 1);

    bar.append("text")
      .attr("x", function(d) {
        return x(d) - 3;
      })
      .attr("y", barHeight / 2)
      .attr("dy", ".35em")
      .text(function(d) {
        return d;
      });
  };

&lt;/script&gt;
</code></pre>