Wie animiert man den Radius und die Bogenlänge eines Kreisdiagramms in d3 (gleichzeitig)?

Question

Ich habe herausgefunden, wie man die Bogenlänge eines Tortendiagramms mit neuen Werten ändert, indem man d3 nach Bostock's Pie Chart Update verwendet, aber es fällt mir schwer herauszufinden, wie man gleichzeitig den Radius des Bilddiagramms animiert.

Dies ist ein Ausschnitt aus meinem aktuellen Code:

pie_inner.value(function(d) { 
    return d.toward === toward || toward === "both" ? d.spent : 0; 
}); 

path_inner 
    .data(function(d) { 
     return pie_inner(d.data).map(function(m) { 
      m.r = d.r; 
      return m; 
     }) 
    }) 
    .transition() 
    .duration(750) 
    .attrTween("d", function(d) { 
     var interpolate = d3.interpolate(this._current, d); 
     this._current = interpolate(0); 
     return function(t) { 
      arc_inner.innerRadius(d.r - thickness); 
      arc_inner.outerRadius(d.r); 

      return arc_inner(interpolate(t)); 
     }; 
    }); 

die Bogenlänge schön auf die neuen Werte beseelt Mit diesem Code aber der Radius „springt“ auf den neuen Wert.

Ich sehe, dass this code animiert sowohl die Bogenlänge und den Radius, aber es tut es in der Folge im Gegensatz zu der gleichen Zeit.

Answer 1

ich den Radius wurde die Einstellung der Funktion outerRadius(), aber ich dachte, wenn ich die Eigenschaft nur gesetzt, dann funktioniert es:

pie_inner.value(function(d) { 
    return d.toward === toward || toward === "both" ? d.spent : 0; 
}); 

path_inner 
    .data(function(d) { 
     return pie_inner(d.data).map(function(m) { 
      m.r = d.r; 
      return m; 
     }) 
    }) 
    .transition() 
     .duration(750) 
     .attrTween("d", function(d) { 
      d.innerRadius = d.r - thickness; 
      d.outerRadius = d.r; 
      var interpolate = d3.interpolate(this._current, d); 
      this._current = interpolate(0); 

      return function(t) { 
       return arc_inner(interpolate(t)); 
      }; 
     });