D3 arcTween - Aktualisieren von Übergängen für mehrere Kreisdiagramme

Question

Ich habe versucht, eine Reihe von D3 Kreisdiagrammen zu erstellen, die zeichnen, wenn eine JSON-Anforderung zurückgegeben wird.

Ich kann die Beschriftungen und Hintergrundpfade funktionieren, aber ich bin nicht in der Lage, die Vordergrundpfade zu zeichnen. Dieses Problem tritt nur auf, wenn ich versuche, mehrere Tortendiagramme zu erstellen.

Ein Beispiel für meine aktuellen Fortschritt finden Sie hier:
http://jsbin.com/wubohidefo/edit?html,js,output

Jede Hilfe Sie die Vordergrund- Wege zu bekommen liefern kann arbeiten oder erklären, was dies verursacht würde sehr geschätzt werden.

Answer 1

Wenn Sie zurück arc(d) in arcTween:

function arcTween(transition, newAngle) { 
    transition.attrTween("name", function(d) { 

     var interpolate = d3.interpolate(d.endAngle, newAngle); 
     return function(t) { 
      d.endAngle = interpolate(t); 
      text.text(((d.endAngle/τ)*10).toFixed(1)); 
      return arc(d); 
     }; 
    }); 
} 

Sie sollten stattdessen foreground.attr("d", arc) werden Einstellung:

function arcTween(transition, newAngle) { 
    transition.attrTween("name", function(d) { 

     var interpolate = d3.interpolate(d.endAngle, newAngle); 
     return function(t) { 
      d.endAngle = interpolate(t);     
      text.text(((d.endAngle/τ)*10).toFixed(1)); 
      foreground.attr("d", arc); 
     }; 
    }); 
}