javascript - D3 ライブラリで曲線をアニメーション化するリソースを最小限に抑える方法

Question

D3 には、曲線の描画をアニメーション化するメソッドが組み込まれていますか?
プロジェクトにたくさんのアニメーション カーブが必要です。Jason Davies ソリューションリンク to example、link to js fileを試してみましたが、正常に動作していますが、一度に 30 以上のアニメーション カーブを実行すると、Chrome ブラウザでさえ動作が遅くなり始めます。
私の場合、各曲線には独自の座標があるため、ブラウザーはそれらすべてのパスを処理する必要があります。これは理解していますが、ジェイソンのソリューションは、反復ごとにすべてのパスを再計算します。ドット。
私は d3 ライブラリを初めて使用するのでわかりません。すべてのパスを一度計算してから、0% から 100% までの曲線描画を単純にアニメーション化することはできますか? または、すべてがさらに簡単で、これには簡単な方法がありますか?

Answer 1

パスのdパラメータを設定すると、d3 のデフォルト アニメーションでアニメーション化されます。したがって、これは適切にアニメーション化する必要があります。

var svg = d3.select('#myelement').append('svg'),
    curve = svg.append('path')
                 .attr('d', 'M100,200 C100,100 250,100 250,200S400,300 400,200');

curve.transition()
       .attr('d', 'M0,0 C100,100 250,100 250,200S400,300 400,200');

JsFiddleでこれを参照してください。

曲線コマンドの追加ドキュメントについては、公式ドキュメントを参照してください。