Döngüleri doğru D3 javascript kitaplığı kullanarak ara vermek

Question

Şu anda D3 kitaplığı bir çörek grafiği oluşturmak için kullanıyorum. Bir tuşa basıldığında aradaki arasında geçiş yaptığınız iki durum var. Pasta dilimleri, poli çizgiler ve metin etiketleri, tuşa basıldığında, grafik etrafında doğru şekilde hareket eder. Ancak, düğmeye bastığımda bazı çevreler doğru şekilde hareket etmiyor. Daireler yerinde kalır, ancak dönüşümün bitiş yerinde yeni daireler çizilir.

Burada davranışı gösteren bir jsfiddle vardır: http://jsfiddle.net/Qh9X5/7847/

çevreleri kontrol eden söz konusu kod burada özellikle:

 /* ------- OUTER POINTS -------*/ 


     var outerPoint = fndAfter.select(".outerPoints").selectAll(".outerPoint") 
      .data(pie(data), key); 

     outerPoint.enter() 
      .append("circle") 
      .attr("r", "2"); 

     outerPoint.transition().duration(1000) 
      .attrTween("transform", function (d) { 
       this._current = this._current || d; 
       var interpolate = d3.interpolate(this._current, d); 
       this._current = interpolate(0); 
       return function (t) { 

        var d2 = interpolate(t); 
        var pos = outerArc.centroid(d2); 
        pos[0] = radius * 0.624 * (midAngle(d2) < Math.PI ? 1 : -1); 
        return "translate(" + pos + ")"; 
       }; 
      }); 

     outerPoint.exit() 
      .remove(); 

     /* ------- INNER POINTS -------*/ 

     var innerPoint = fndAfter.select(".innerPoints").selectAll(".innerPoint") 
      .data(pie(data), key); 

     innerPoint.enter() 
      .append("circle") 
      .attr("r", "2"); 

     innerPoint.transition().duration(1000) 
      .attrTween("transform", function (d) { 
       this._current = this._current || d; 
       var interpolate = d3.interpolate(this._current, d); 
       this._current = interpolate(0); 
       return function (t) { 
        var d2 = interpolate(t); 
        var pos = outerArc.centroid(d2); 
        pos[0] = radius * 0.624 * (midAngle(d2) < Math.PI ? 1 : -1); 
        return "translate(" + midPoint(midPoint(arc.centroid(d2), outerArc.centroid(d2)), outerArc.centroid(d2)) + ")"; 
       }; 
      }); 

     innerPoint.exit() 
      .remove(); 

Ben attrTween aynı çalışması gerekir izlenim oldu tüm dönüşüm fonksiyonları için hangi unsur olursa olsun.

Answer 1

Sorun, ara ile değil. Seçiminizi tanımlamak için selectAll('.innerPoint') kullanın, ancak hiçbir zaman innerPoint sınıfını çevrelere uygulamayın, böylece d3 hiçbir zaman eşleşen bir seçim bulamaz ve her seferinde yeni daireler ekler.

Çalışma kemanı: http://jsfiddle.net/Qh9X5/7849/