title: How to update labels on d3 pie chart with an interactive legend
body: <p>I have developed a D3 pie chart. It has an interactive legend clicking on the legend removes or re-enters the corresponding pie segment. My problem is that I cannot figure out how to update the labels when using the legend. </p>
  
  <p>I found <a href="https://stackoverflow.com/questions/25320004/how-do-i-update-both-the-content-and-location-of-text-labels-on-a-d3-pie-chart">this answer</a> particularly helpful, but I still cannot get my own working.</p>
  
  <p>NVd3 pie charts have this functionality, but I am looking for a purely d3 solution. </p>
  
  <p>My code is in <a href="http://jsfiddle.net/cez5124k/7/" rel="nofollow noreferrer">this fiddle</a>:</p>
  
  <p><a href="https://i.stack.imgur.com/NZVrP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NZVrP.png" alt="enter image description here"></a></p>
  
  <p>I have included the part I think the problem resides in below:</p>
  
  <pre><code>legend.on('click.updatelabels', function(Task) {                            
      var rect = d3.select(this);                             
      var enabled = true;                                     
      var totalEnabled = d3.sum(chartData.map(function(d) {     
          return (d.enabled) ? 1 : 0;                           
      }));                                                    
  
      if (rect.attr('class') === 'disabled') {                
          rect.attr('class', '');                               
      } else {                                                
          if (totalEnabled &lt; 2) return;                         
          rect.attr('class', 'disabled');                       
          enabled = false;                                      
      }                                                       
  
      layoutLabels.value(function (d) { return (d.enabled) ? 1 : 0;  });
  
      d3.select('Text').selectAll("pieLegend").remove()
  
      pieLabels.select("text")   
         .attr("transform", function (d) {
             var c = arc.centroid(d),
                 x = c[0],
                 y = c[1],
                 // pythagorean theorem for hypotenuse
                 h = Math.sqrt(x * x + y * y);
             return "translate(" + (x / h * labelRadius) + ',' +
                (y / h * labelRadius) + ")";
         })
        .attr("dy", ".35em")
        .attr("text-anchor", "middle")
        .text(function (d, i) { return ((d.Volume / sum) * 100).toFixed(0) + "%"; });
  });    
  </code></pre>
  
  <p>I would appreciate any help</p>