ノードへの要素の加えられ方

このレッスンではノードに要素を加えた後 さらに要素を加えた時の 処理についてご説明をします。 いま開いている HTML ドキュメントですけど まず要素が body の中に ３つ p 要素が入っています。 そして d3 のコードですけど select で body を選択した上で さらに p 要素をすべて選択する selectAll ということで この３つの要素が選択されます。 そして data を５つ、 都合５つ設定した上で enter、append とメソッドを呼び出して append で p 要素を 加えることにします。 そしてテキストを changed という文字と それから data、この 1, 2, 3, 4, 5 をとってきますので それを付け加えて表示する ということになっています。 そしてさらに、またこの p、 selectAll の３つの要素を選んだ p に対して data を、違う data を５つ設定し そしてテキストを今度は追加でなくて 書き換えにしてみます。 この追加と同じ様に 値の方は文字は updated ですけれども そこに、この data を渡して テキストとして設定する というふうになっています。 まずこれがどういう結果になるか ということを想像して下さい。 その上で確かめたいと思います。 [ファイル]＞[リアルタイムプレビュー]です。 そうすると最初、 item 1, 2, 3 とあったんですけど それが書き換わっていますね。 changed が４つ、５つとあります。 どういうことかというと まず changed を append で加えました。 その時には item 1, 2, 3 という データがあったので それに対して追加が行われたと。 ただしデータが５つあったんですが ３つ分はすでに item という テキストがあったので それは空振りをした上で append は４つ目以降ですね、 4, 5 と、このデータが追加されて、 そこにテキスト changed が設定されました。 次にテキストの書き換えを行いました。 その時、データは ６から 10 までの５つあったんですけど 書き換えの対象となるのは 初めに設定してあった p 要素３つ、 item とありましたけど その３つだけが対象となって 6, 7, 8 updated…