d3.jsを使用して弧を水平線にアニメーション化する

Question

弧を水平線でアニメーション化しようとしていますが、これが可能かどうか、そしてそれを検討する最善の方法がわからない。私は、パスジェネレータを使用して円弧を描いています：

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); 

パスは私がなりたいのクリックされたとき弧をアニメーション化して水平線に向かって開き、水平線に平らにすることができます。これどうやってするの？アドバイスをいただければ幸いです。ありがとうございました！！

Answer 1

直線への弧の開口は、弧の内側と外側の半径が一緒に成長するようなもので、開始角から離れて同じ弧長を維持する終了角です。

まず、あなたは（開始と終了の間に半径回ラジアン）あなたの弧の長さを知って

その後、半径を大きくし、アーク長が一定になるように、開始と終了の間の距離を減少させます。弧の起点を移動して、半径の拡大を補うことを忘れないでください。

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