title: D3 update pie data with zero values
body: <p>I am updating a pie chart with a dynamic JSON feed. My update function is below</p>
  
  <pre><code>function updateChart(data) {
  arcs.data(pie(data)); // recompute angles, rebind data
  
  arcs.transition()
      .ease("elastic")
      .duration(1250)
      .attrTween("d", arcTween)
  
  sliceLabel.data(pie(data));
  
  sliceLabel.transition()
      .ease("elastic").duration(1250)
      .attr("transform", function (d) {
      return "translate(" + arc2.centroid(d) + ")";
  })
      .style("fill-opacity", function (d) {
      return d.value == 0 ? 1e-6 : 1;
  });
  }
  
  function arcTween(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0);
  return function (t) {
      return arc(i(t));
  };
  </code></pre>
  
  <p>When the JSON has 0 values for all objects, the arcs and labels disappear. Exactly what I want to happen.</p>
  
  <p>The problem is when I pass a new JSON after one that was full of zeros, the labels come back and tween etc but the arcs never redraw.</p>
  
  <p>Any suggestions on correcting my update function so that the arcs redraw correctly after they their d values have been pushed to zero?</p>
  
  <p>-- edit --</p>
  
  <p>Lars suggested below that I use the .enter() exactly in the same way as I did when I created the graph. I tried doing this but the results did not change. See new update function below. </p>
  
  <pre><code>this.updatePie = function updateChart(data) {
  arcs.data(pie(data))
      .enter()
      .append("svg:path")
          .attr("stroke", "white")
          .attr("stroke-width", 0.5)
          .attr("fill", function (d, i) {
          return color(i);
  })
      .attr("d", arc)
      .each(function (d) {
      this._current = d
  })
  arcs.transition()
      .ease("elastic")
      .duration(1250)
      .attrTween("d", arcTween)
  sliceLabel.data(pie(data));
  sliceLabel.transition()
      .ease("elastic").duration(1250)
      .attr("transform", function (d) {
      return "translate(" + arc2.centroid(d) + ")";
  })
      .style("fill-opacity", function (d) {
      return d.value == 0 ? 1e-6 : 1;
  });
  }
  function arcTween(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0);
  return function (t) {
      return arc(i(t));
  };
  }
  </code></pre>