title: D3js code when called twice duplicates the graph instead of refreshing
body: <p>Here is my D3js code</p>
  
  <pre><code>    function ShowGraph(data)
  {
  
      var w = 600,
                  h = 600,
                  padding = 36,
                  p = 31,
                  barwidth = 1;
  
  
  
              var bar_height = d3.scale.linear()
                              .domain([d3.max(data, function(d) { return d.count; }), 0] )  // min max of count
                              .range([p, h-p]);
  
              var bar_xpos = d3.scale.linear()
                              .domain([1580, d3.max(data, function(d) { return d.year; })] )  // min max of year
                              .range([p,w-p]);
  
              var xAxis = d3.svg.axis()
                          .scale(bar_xpos)
                          .orient("bottom")
                          .ticks(5);  //Set rough # of ticks
  
              var yAxis = d3.svg.axis()
                          .scale(bar_height)
                          .orient("left")
                          .ticks(5);
  
              var svg = d3.select("#D3line").append("svg")
                          .attr("width", w)
                          .attr("height", h);
  
              svg.append("g")
                  .attr("class", "axis")
                  .attr("transform", "translate(0," + (h - padding) + ")")
                  .call(xAxis);
  
              svg.append("g")
                  .attr("class", "axis")
                  .attr("transform", "translate(" + padding + ",0)")
                  .call(yAxis);
  
              svg.selectAll("rect")
                  .data(data)
                  .enter().append("rect")
                  .attr("class","bar")
                  .attr("x", function(d) {
                      return bar_xpos(d.year); })
                  .attr("y", function(d) { 
                      return bar_height(d.count); })
                  .attr("width", barwidth)
                  .attr("height", function(d) {return h - bar_height(d.count) - padding; })
                  .attr("fill", "steelblue")  
  }
  </code></pre>
  
  <p>i run the above code at the click of a button.When i click the button once the graph displays but if click it once again it shows another graph.So now i get 2 graphs.If i click once more i get 3.All i want is to update the existing graph instead of duplicating the graphs. </p>