title: d3js pies, filtering out smaller arcs, labels mixed
body: <p>So again me we this d3js pies.</p>
  
  <p>I've managed to set up pie graph with change of slices(arcs) and text of percentage on radio button check. You can see an example on following link: <a href="http://jsfiddle.net/fBwEe/" rel="nofollow">http://jsfiddle.net/fBwEe/</a></p>
  
  <p>So after that I've noticed an issue with smaller arcs and their labels. They show up in middle of arc and, as they are wider that arc width, they appear cutted out.</p>
  
  <p>So I tried to filter out those smaller arcs and put their labels nearer to center of circle so they are outside ther arc but beneath it.</p>
  
  <p>I've used d3js <code>.filter()</code> function. And there my problem appeared. They get mixed somewhere in process of rendering, specially on change display data with radio button, and even that data is empty (like on MG set of Data) labels are shown. I'm confused, because I do not have any error in console but obviously something is wrong. You can test it out in <a href="http://jsfiddle.net/fBwEe/" rel="nofollow">jsfiddle</a> and here is code:</p>
  
  <pre><code>var data_1 = [
                {"ASS": 50, "PR": 70, "BPR":3, "MA": 1, "MG": 30},
                {"ASS": 3, "PR": 2, "BPR":4, "MA": 40, "MG": 70 },
                {"ASS": 20, "PR": 5, "BPR":6, "MA": 2, "MG": ""},
                {"ASS": 25, "PR": 2, "BPR":2, "MA": 55, "MG": ""},
                {"ASS": 2, "PR": 2, "BPR":2, "MA": 3, "MG": ""},
               ]
  
  var dataN_1 = [
                  {"naslov":"Landkreis Starnberg", "total":"23.610", "id":"32829456"}
  
                ]
  
  var width_1 = $(".pie_container_1").width();
      height_1 = $(".pie_container_1").height();
  
  
  var svg_1 = d3.select(".pie_container_1").append("svg")
      .attr("width", width_1)
      .attr("height", height_1)
      .attr("id","canvasPie_1")
      .attr("preserveAspectRatio","xMinYMid")
    .append("g")
      .attr("transform", "translate(" + width_1 / 2 + "," + height_1 / 2 + ")");
  
  var canvasPie_1 = $("#canvasPie_1"),
              aspect = canvasPie_1.width() / canvasPie_1.height(),
              containerd3_1 = canvasPie_1.parent();
  
  var targetWidth_1 = containerd3_1.width();
  var targetHeight_1 = containerd3_1.height();
      canvasPie_1.attr("width", targetWidth_1);
      canvasPie_1.attr("height", targetHeight_1);
  
  var radius_1 = Math.min(targetWidth_1, targetHeight_1) / 2;
  
  // var color_1 = d3.scale.category20c();
  
  var color_1 = d3.scale.linear().domain([0,1,2,3,4,5]).range(['#c6dbef','#8cb2e0','#548cd3','#16355b','#0f233d']);
  
  var pie_1 = d3.layout.pie()
      .value(function(d) { return d.ASS; })
      .sort(null);
  
  var arc_1 = d3.svg.arc()
      .innerRadius(radius_1 - 40)
      .outerRadius(radius_1);
  
  var path_1 = svg_1.datum(data_1).selectAll("path")
        .data(pie_1)
      .enter().append("g")
        .attr("class", "slice")
        .append("path")
        .attr("fill", function(d, i) { return color_1(i); })
        .attr("d", arc_1)
        .each(function(d) { this._current = d; }); // store the initial angles
  
  
  svg_1.selectAll(".slice").filter(function(d) { return d.endAngle - d.startAngle &gt; .2; })
      .append("text")
      .attr("class","val")
      .attr("transform", function(d) {
                  d.innerRadius = 0;
                  d.outerRadius = radius_1;
                  return "translate(" + arc_1.centroid(d) + ")";
              })
      .style("text-anchor", "middle")
      .attr("fill","#FFFFFF")
      .style("font-weight","600")
      .data(data_1)
      .text(function(d) { return d.ASS + "%"; });
  
  svg_1.selectAll(".slice").filter(function(d) { return d.endAngle - d.startAngle &lt; .2; })
      .append("text")
      .attr("class","valS")
      .attr("transform", function(d) {
                  d.innerRadius = 0;
                  d.outerRadius = radius_1;
                  return "translate(" + arc_1.centroid(d)[0] + "," +  (arc_1.centroid(d)[1]+7)*0.6  + ")";
              })
      .style("text-anchor", "middle")
      .attr("fill","#777")
      .style("font-weight","600")
      .data(data_1)
  .text(function(d) { return d.ASS + "%"; });
  
  d3.selectAll(".pie_change_1")
    .on("change", change_1);
  
  
  
  function change_1() {
     var value_1 = this.value;
  
  svg_1.selectAll(".val").remove();
  svg_1.selectAll(".valS").remove();
  
  // clearTimeout(timeout_1);   
  pie_1.value(function(d) { return d[value_1]; }); // change the value function
  
  path_1 = path_1.data(pie_1); // compute the new angles
  
  path_1.transition().duration(750).attrTween("d", arcTween_1); // redraw the arcs
  
  svg_1.selectAll(".slice").data(pie_1).filter(function(d) { return d.endAngle - d.startAngle &gt; .2; })
  .append("text")
  .attr("class","val")
  .attr("transform", function(d) {
              d.innerRadius = 0;
              d.outerRadius = radius_1;
              return "translate(" + arc_1.centroid(d) + ")";
          })
  .style("text-anchor", "middle")
  .attr("fill","#FFFFFF")
  .style("font-weight","600")
  .data(data_1)
  .text(function(d) { 
                       if( value_1 == "MG" &amp;&amp; d.MG != "" ){ return d.MG + "%"; }
                       if( value_1 == "MA" ){ return d.MA + "%"; }
                       if( value_1 == "BPR" ){ return d.BPR + "%"; }
                      if( value_1 == "PR" ){ return d.PR + "%"; }
                       if( value_1 == "ASS" ){ return d.ASS + "%"; }
  
                   });
  
  
  svg_1.selectAll(".slice").data(pie_1).filter(function(d) { return d.endAngle - d.startAngle &lt; .2; })
  .append("text")
  .attr("class","valS")
  .attr("transform", function(d) {
              d.innerRadius = 0;
              d.outerRadius = radius_1;
              return "translate(" + arc_1.centroid(d)[0] + "," +  (arc_1.centroid(d)[1]+7)*0.6  + ")";
          })
  .style("text-anchor", "middle")
  .attr("fill","#777")
  .style("font-weight","600").data(pie_1).filter(function(d) { return d.endAngle - d.startAngle &lt; .2; })
  .data(data_1)
  .text(function(d) { 
                       if( value_1 == "MG" &amp;&amp; d.MG != "" ){ return d.MG + "%"; }
                       if( value_1 == "MA" ){ return d.MA + "%"; }
                       if( value_1 == "BPR" ){ return d.BPR + "%"; }
                      if( value_1 == "PR" ){ return d.PR + "%"; }
                       if( value_1 == "ASS" ){ return d.ASS + "%"; }
  
                   });
  
  
  }
  
  
  function arcTween_1(a) {
    var i = d3.interpolate(this._current, a);
    this._current = i(0);
    return function(t) {
      return arc_1(i(t));
    };
  }
  
  function angle(d) {
      var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
      return a &gt; 90 ? a - 180 : a;
    }
  </code></pre>
  
  <p>Any help or advice is welcome...</p>