4

円弧を水平線にアニメーション化しようとしていますが、これが可能かどうか、また最善の方法は何かわかりません。パスジェネレータを使用して円弧を描いています:

var arc = d3.svg.arc()
  .outerRadius(function(d){ return d.outerRadius; })
  .innerRadius(function(d){ return d.outerRadius*0.6; })
  .startAngle(function(d){ return d.startAngle; })
  .endAngle(function(d){ return d.endAngle; });

次に、json データを読み込んで、パイ レイアウトを使用して円弧を追加します。

var donut = d3.layout.pie();
var paths = arcs.selectAll("path").data(donut(json));
  paths.enter().append("path")
  .on("click", anim)
  .attr("d", arc).transition().duration(1000)
  .attrTween("d", tweenPie);

パスをクリックすると、円弧が開いて水平線に平らになるようにアニメーション化できるようにしたいと考えています。これどうやってするの？どんなアドバイスでも大歓迎です。ありがとうございました！！

4

1 に答える 1

3

線に開いた弧は、弧の内側と外側の半径が一緒に成長し、同じ弧の長さを維持するために開始角度から離れた終了角度に似ています。

最初に、弧の長さを知っています（始点と終点の間の半径×ラジアン）

次に、半径を大きくし、始点と終点の間の距離を短くして、弧の長さが一定になるようにします。大きくなる半径を補正するために、円弧の原点も移動することを忘れないでください。

半径が非常に大きな値に近づくと、開始点と終了点の間のラジアンは、差がほとんどまたはまったくなくなるまで縮小し、その時点で線ができます。

于 2013-01-31T17:04:42.787 に答える