title: How does DOM Node cleanup work in d3?
body: <p>I'm working on a graph visuzalization using D3 in a backbone view. I allow the user to pinch-zoom the graph, smoothly transitioning using webkit transforms, and redrawing on release. To keep the code simple, I'm just redrawing the graph at the new scale, rather than recaluclating the new positions and sizes for the elements (this was my original approach, but my team requested the redraw route). </p>
  
  <p>[ I spoke with Bostock via twitter. This is actually not the preferred way of doing things ]</p>
  
  <p>The thing I am noticing is that for each redraw, I'm dumping tons of dom nodes that aren't cleaned up.</p>
  
  <p>This isn't related to circular references within event handlers/closures, as I've disabled all but my labels (these have no handlers attached), and the same behavior occurs.</p>
  
  <p>I've tried aggressively removing the elements from the graph, but the dom nodes still seem to leak.</p>
  
  <p>Here's some relevant code. 'render' is called for a new set of labels. Upon finishing zooming, 'close' is called on the old graph, and a new one is created with another view instantiation and call to 'render' :</p>
  
  <pre><code>render: function() {
  
          // create the svg offscreen/off dom
          //document.createElementNS(d3.ns.prefix.svg, "svg")
          var svg = this.svg = d3.select(this.el)
              .append("svg:svg")
              .attr('width', this.VIEW_WIDTH)
              .attr('height', this.VIEW_HEIGHT)
  
          this._drawTimeTicks.call(this, true);
          return this;
      },
  
  
  
  _drawTimeTicks: function(includeLabels) {
      var bounds = this.getDayBounds();
      var min = bounds.start;
      var date = new Date(min);
      var hour = 1000 * 60 * 60;
      var hourDiff = 60 * this.SCALE;
      var graphX = (date.getTime() - min) / 1000 / 60;
      var textMargin = 7;
      var textVert = 11;
  
      // Using for loop to draw multiple vertical lines
      // and time labels.
  
      var timeTicks = d3.select(this.el).select('svg');
      var width = timeTicks.attr('width');
      var height = timeTicks.attr('height');
  
      for (graphX; graphX &lt; width; graphX += hourDiff) {
          timeTicks.append("svg:line")
              .attr("x1", graphX)
              .attr("y1", 0)
              .attr("x2", graphX)
              .attr("y2", height)
              .classed('timeTick');
  
          if (includeLabels) {
              timeTicks.append("svg:text")
                  .classed("timeLabel", true)
                  .text(this.formatDate(date))
                  .attr("x", graphX + textMargin)
                  .attr("y", textVert);
          }
  
          date.setTime(date.getTime() + hour);
      }
  
  
  
  close: function() {
          console.log("### closing the header");
          this.svg.selectAll('*').remove();
          this.svg.remove();
          this.svg = null;
          this.el.innerHTML = '';
  
          this.unbind();
          this.remove();
      }
  </code></pre>
  
  <p>As you can see, I'm not doing anything tricky with event handlers or closures. With a few zoom interactions I can leak dozens of dom nodes that are never reclaimed by GC. </p>
  
  <p>Is this a memory leak, or is d3 doing something behind the scenes to optimize future graph construction/updates? Is there some better way to destroy a graph that I'm not aware of?</p>
  
  <p>Any ideas?</p>