title: NVD3 Update Chart with d3.json
body: <p>I've made a chart using NVD3, which populates 3 stacked bars.  On clicking a bar, I want an request to be fired, and for the chart to be populated with new data altogether.  Unfortunately, the chart does not REPLACE the data I previously had, but APPENDS a new bar to my chart, forming a chart with 4 stacked bars, when I only want 1 bar.  How can I remove the old data, while bringing in new data?</p>
  
  <p>Thanks!</p>
  
  <pre><code>var chartData = setChartData(data1);
  
  var chart;
  nv.addGraph(function() {
  chart = nv.models.multiBarChart()
    .barColor(d3.scale.category20().range())
    .margin({bottom: 100})
    ;
  
  chart.multibar
    .hideable(true);
  
  chart.reduceXTicks(false).staggerLabels(false);
  
  chart.xAxis
      .axisLabel("Current Index")
      .showMaxMin(true)
      .tickFormat(function(d,i){ return allBillsForChart[d][0][2]});
  
  chart.yAxis
      .tickFormat(d3.format(',.1f'));
  
  d3.select('#chart1 svg')
      .datum(chartData)
     .call(chart);
  
  nv.utils.windowResize(chart.update);
  
  chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e));   });
  
  return chart;
  },function(){
  d3.selectAll(".nv-bar").on('click', function(d, i){                   
              d3.json("fakeURLToFetchData", function(error, data){
    arr = [];
    arr.push(data)
    handledData = setChartData(arr)
  
    d3.select('#chart1 svg').datum(handledData).call(chart);
    nv.utils.windowResize(chart.update);
    return chart
  })
  });
  </code></pre>
  
  <p>});</p>