スポンサーリンク
スポンサーリンク

データの削除

データの削除処理を書いていきます。前回の記事のサンプルコードだとデータ数と要素数が一致するときのみ適正に動作します。読み込まれたデータの数が増減するときは、動作しません。

今回必要な処理は、
データが減ったときは横棒を削除する処理を追記する必要があります。D3.jsでは、exit()メソッドを使うことで、対応するデータがなくなった要素を処理することができます。
「処理する」となぜ表現したのかというと、exit()メソッドには削除機能はなく、以後に続くメソッドチェーンで要素の削除処理を行うためです。このようにしているのは、要素削除時、アニメーションを使えるようにするためです。
実際に要素を削除するにはremove()メソッドを使います。

表示先要素
.selectAll(SVG要素)
.data(データセット)
.exit()
.remove()

サンプルコードの実行結果はこちら

コメント

タイトルとURLをコピーしました