title: Replace NVD3 chart with different chart type
body: <p>I'm trying to replace a discreteBarChart with a pieChart (NVD3 models).
  Is there a way to clean/update the chart or element content?</p>
  
  <p>Html code:</p>
  
  <pre><code>&lt;div id="chart"&gt;
      &lt;svg&gt;&lt;/svg&gt;
  </code></pre>
  
  <p>Chart initialization:</p>
  
  <pre><code>    nv.addGraph(function() {
      var xKey = 'label';
      var yKey = 'value';
  
      var chart = nv.models.discreteBarChart().x(function(d) {
          return d[xKey]
      }).y(function(d) {
          return d[yKey]
      }).staggerLabels(true)
  
      .tooltips(false).showValues(true).transitionDuration(250);
  
      d3.select('#chart svg').datum(defaultData()).call(chart);
  
      nv.utils.windowResize(chart.update);
  
      return chart;
  });
  </code></pre>
  
  <p>And my atempt to replace the existing chart:</p>
  
  <pre><code>function updateToPie(key1, key2) {
      var width = 500,
      height = 500;
  
      chart = nv.models.pieChart().x(function(d) {
          return d[key1]
      }).y(function(d) {
          return d[key2]
      }).color(d3.scale.category10().range()).width(width).height(height);
  
      d3.select("#chart svg").datum(chartData[0].values).transition()
              .duration(1200).attr('width', width).attr('height', height)
              .call(chart);
  
      chart.dispatch.on('stateChange', function(e) {
          nv.log('New State:', JSON.stringify(e));
      });
  
      return chart;
  
  }
  </code></pre>
  
  <p>However this only overlaps the piechart to the existing barchart. Any help would be apreciated. Thanks</p>