title: Why doesn't this D3 chart redraw when I repeatedly call it's original draw function?
body: <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>