Kreise auf SVG wont Tween korrekt mit D3 Javascript Bibliothek

Question

Ich verwende derzeit die D3-Bibliothek, um ein Donut-Diagramm zu erstellen. Ich habe zwei Zustände für das Diagramm, zwischen denen Sie sich bewegen, wenn Sie eine Taste drücken. Die Kreissegmente, Polylinien und Textbeschriftungen werden beim Drücken der Schaltfläche korrekt um das Diagramm herum angeordnet. Einige Kreise, die ich habe, werden jedoch nicht korrekt miteinander verknüpft, wenn ich den Knopf drücke. Die Kreise bleiben an ihrem Platz, jedoch werden am Endort der Transformation neue Kreise gezeichnet.

ich ein jsfiddle haben, die das Verhalten hier zeigt: http://jsfiddle.net/Qh9X5/7847/

Der Code in Frage, die die Kreise steuert, ist speziell hier:

 /* ------- 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(); 

Ich hatte den Eindruck, dass die attrTween die gleiche Arbeit sollte für alle Transformationsfunktionen egal welches Element es ist.

Answer 1

Das Problem ist nicht bei attrTween. Sie verwenden selectAll('.innerPoint'), um Ihre Auswahl zu definieren, aber Sie wenden nie die Klasse innerPoint auf die Kreise an, sodass d3 niemals eine übereinstimmende Auswahl findet und jedes Mal neue Kreise anfügt.

Arbeitsgeige: http://jsfiddle.net/Qh9X5/7849/