title: render multiple d3 charts without overwriting each other
body: <p>I have a collection of data (represented by a Backbone.js collection) containing two sets of data (for this example - in real world app, there will be more). i want to represent each set of data in a small d3.js bar chart. When I render the first bar chart, everything looks great, but when I render the second bar chart, the first bar chart gets written over again and it looks darker and blurry (easier to view than explain, see this fiddle <a href="http://jsfiddle.net/mjmitche/avo5nnus/15/" rel="nofollow">http://jsfiddle.net/mjmitche/avo5nnus/15/</a>). if there were 3 sets of data, the first would end up very dark and blurry (overwritten twice), the second dark and blurry (because only overwritten once), and the third normal looking.</p>
  
  <p>I understand the problem. When I use d3 to add the vertical guides, for example, I use this code</p>
  
  <pre><code>d3.selectAll('svg')
  </code></pre>
  
  <p>so on the second pass through the collection, the first svg that was rendered gets selected again and written over. Notice in the fiddle how, after both charts are rendered, the first is also darker (as if it has twice as much ink) and blurry (because the numbers have been rendered twice).</p>
  
  <p>Initially, instead of using <code>d3.selectAll('svg')</code>, I tried <code>d3.select('svg')</code> but then only the first chart had the vertical guides, but when you use <code>d3.select</code> it always selects the first item found. </p>
  
  <p>How can I render a two sets of data using a d3 chart for each without continually writing over the first one? </p>
  
  <pre><code>var myModel = Backbone.Model.extend({});
  
  var collection = Backbone.Collection.extend({
      model: myModel,
      initialize: function() {
  
      }
  
  });
  var MainView = Backbone.View.extend({ 
      el: ('.container'),
      initialize: function(){
          c = new collection({});
          c.reset([{stats: [1,2,3]}, {stats: [4,3,2] }]);
          this.render();
      },
      render: function(){
          c.each(this.addChart, this);
      },
      addChart: function(chart){
          alert("pause to view first chart, very clear, no overlap, second time through not so");
          var view = new D3View({model: chart});
          console.log(view, "view");
          this.$("#d3results").append(view.render().el);
      }
  
  });
  
  var D3View = Backbone.View.extend({
  
      initialize: function(){
  
      },
  
      render: function(){
          console.log("render in d3view");
  
  
       var modeldata = this.model.toJSON();
        var bardata = modeldata.stats;
          console.log(bardata, "bardata");
       var margin = { top: 30, right: 30, bottom: 40, left:70 }
  
      var height = 200 - margin.top - margin.bottom,
          width = 300 - margin.left - margin.right,
          barWidth = 50,
          barOffset = 5;
  
      var tempColor;
  
      var colors = d3.scale.linear()
      .domain([0, bardata.length*.33, bardata.length*.66, bardata.length])
  
      var yScale = d3.scale.linear()
              .domain([0, d3.max(bardata)])
              .range([0, height]);
  
      var xScale = d3.scale.ordinal()
              .domain(d3.range(0, bardata.length))
              .rangeBands([0, width], 0.2)
  
      var tooltip = d3.select('body').append('div')
              .style('position', 'absolute')
              .style('padding', '0 10px')
              .style('background', 'white')
              .style('opacity', 0)
  
      var myChart = d3.select('#d3results').append('svg')
          .style('background', '#fff')
          .attr('width', width + margin.left + margin.right)
          .attr('height', height + margin.top + margin.bottom)
          .append('g')
          .attr('transform', 'translate('+ margin.left +', '+ margin.top +')')
          .selectAll('rect').data(bardata)
          .enter().append('rect')
              .style('fill', function(d,i) {
                  return colors(i);
              })
              .attr('width', xScale.rangeBand())
              .attr('x', function(d,i) {
                  return xScale(i);
              })
              .attr('height', 0)
              .attr('y', height)
     myChart.transition()
          .attr('height', function(d) {
              return yScale(d);
          })
          .attr('y', function(d) {
              return height - yScale(d);
          })
          .delay(function(d, i) {
              return i * 20;
          })
  
  
  
      var vGuideScale = d3.scale.linear()
          .domain([0, d3.max(bardata)])
          .range([height, 0])
  
      var vAxis = d3.svg.axis()
          .scale(vGuideScale)
          .orient('left')
          .ticks(10)
  
      var vGuide = d3.selectAll('svg').append('g')
          vAxis(vGuide)
          vGuide.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')')
          vGuide.selectAll('path')
              .style({ fill: 'none', stroke: "#000"})
          vGuide.selectAll('line')
              .style({ stroke: "#000"})
  
      var hAxis = d3.svg.axis()
          .scale(xScale)
          .orient('bottom')
          .tickValues(xScale.domain().filter(function(d, i) {
              return !(i % (bardata.length/5));
          }))
  
  
  
  
  
          return this;
      }
  });
  
  view = new MainView();
  </code></pre>