[解決済み] トランジション終了時にコールバックを呼び出す

質問

FadeOutメソッド（jQueryのようなもの）を作りたいのですが D3.js . 私が行う必要があるのは、不透明度を0に設定することです。 transition() .

d3.select("#myid").transition().style("opacity", "0");

問題は、遷移が終了したことを認識するためのコールバックが必要なことです。コールバックはどのように実装すればよいのでしょうか？

どのように解決するのですか？

トランジションの "end" イベントをリッスンしたい。

// d3 v5
d3.select("#myid").transition().style("opacity","0").on("end", myCallback);

// old way
d3.select("#myid").transition().style("opacity","0").each("end", myCallback);

• このデモ は、"end" イベントを使用して、多くのトランジションを順番に連結しています。
• このデモでは ドーナツの例 もこれを使用して複数の遷移を連結しています。
• これは 私自身のデモ で、トランジションの開始と終了で要素のスタイルを変更します。

のドキュメントから transition.each([type],listener) :

もし タイプ が指定された場合、遷移イベントのリスナーを追加し、 "start" と "end" の両方のイベントをサポートします。リスナーは、遷移が一定の遅延と持続時間を持つ場合でも、遷移内の個々の要素に対して呼び出されます。startイベントを使用すると、各要素が遷移を開始したときに、瞬時に変化を起こすことができます。end イベントは、現在の要素を選択して多段階の遷移を開始するために使用することができます。 this を選択し、新しい遷移を派生させることができます。終了イベント中に作成された遷移は、現在の遷移IDを継承するため、以前にスケジュールされた新しい遷移を上書きすることはありません。

参照 このトピックに関するフォーラムスレッド を参照してください。

最後に、フェードアウトした後（遷移が終わった後）に要素を削除したいだけの場合は、以下のように注意しましょう。 transition.remove() .