title: D3.js adding/removing data pie chart slices
body: <p>I have an input control that should on the key up event on the control either add or subtract a slice from a pie chart depending on if you hit the left or right arrow keys.  It doesn't really work as expected because it seems that the new pie slice is sometimes being taken out of existing pie slices and the entire chart is not being recalculated.  I'm not sure if I'm messing up the <code>enter</code> or the <code>exit</code> selection.  Help is appreciated, TIA.</p>
  
  <p>fiddle <a href="http://jsfiddle.net/jaqj3usb/" rel="nofollow">http://jsfiddle.net/jaqj3usb/</a></p>
  
  <p>pertinent code</p>
  
  <pre><code>function removeSlices(n){
          var i = -1;
          while(++i &lt; n){
              data.pop();
          }
  
          paths.data(pie(data)).exit().remove();
          paths.data(pie(data)).attr('d',arc).attr('transform','translate(100,200)')
  
      }
  
      function changeSlices(){
          console.log('woot');
          var shouldAddSlice = d3.event.target.valueAsNumber &gt; data.length,
              numDifference = Math.abs(data.length - d3.event.target.valueAsNumber);
          if(shouldAddSlice){
              addSlices(numDifference);
          }
          else{
              removeSlices(numDifference);
          }
      }
      sliceSlider.on('keyup',changeSlices);
  </code></pre>