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

D3.jsのデータと要素の対応

D3.jsがどのようにして読み込んだデータと表示する要素を
対応させているかを書いていきます。

D3.jsはデータを対応する要素の__data__プロパティに
格納しているだけです。D3.jsはデータを動的に処理するので、
プログラム内にグラフ操作を行うデータを保持せずに、
要素__data__プロパティに入れておき処理を行っています。

データセットを対応する要素に設定するのが、data()メソッドです。
data()メソッドを呼びだしただけではデータが設定されるだけで
対応する要素の追加・削除・更新は行われません。
要素の追加を行うにはenter()メソッド、
要素の削除を行うにはexit()メソッドを利用します。

これらのメソッドを利用したデータ更新処理は
別の記事で説明します。

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

上記を実行していただくといつものグラフが表示されます。
その状態で、__data__プロパティを確認します。

手順(Chromeの場合):
1.サンプルコードを実行しグラフが表示された状態にする。
2.「Ctrl + Shift+ I 」か「f12」を押し、
デベロッパーツールを起動する。
3.「Elements」タブをクリックして、最初のrect要素を選択する
4.「Styles」「Event Listener」「DOM Breakpoints」
「Properties」の中で「Properties」を選択する。
5.「rect」をクリックする。

要素内部のプロパティの一番上に「__data__」があります。
これがD3.jsのdata()メソッドで追加されたプロパティとデータです。
データは「60」と書いてあります。item2の1番目のデータである
「60」と一致します。2つ目以降のrect要素をクリックしていくと、
CSVデータの並びと同様に「180」「40」「120」「160」と入っています。

要素の__data__プロパティに値が入っているのであれば、
自作プログラムを作成して値を代入することも可能です。ですが、
D3.jsにはdatum()メソッドがあるので自作する必要はありません。
datum()メソッドを利用すると、要素データに値を代入できます。

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

datum()メソッドは、パラメーターに数値や文字列だけではなく、
関数を指定することができます。メソッドチェーンで使うメソッドの
パラメーターに関数をシテイルのがD3.jsでは大事です。
上記のサンプルコードの21~24行目のコメントアウトされた箇所を
消して、HTMLファイルを更新をかけると、乱数値が__data__に
設定されます。

datum()メソッドでは、メソッドに関数を指定しましたが、この関数には
2つのパラメーターが渡されています。上記のサンプルでは、渡される
パラメーターは使わないので省きました。データを受け取るための変数を
書かなくてもプログラムは動きます。

D3.jsではメソッドに関数を指定することができ、
関数には2つのパラメータが渡されます。
1番目のパラメーターは要素(データ)の出現順番、
この順番は0から始まり、1ずつ増えていきます。3番目のデータなら2です。
書いていると分かり難いので下記のサンプルコードを実行して、
デベロッパーツールを起動して、「console」タブをクリックしてみましょう。

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

0 = V
1 = E
2 = S
3 = H
4 = A

と出力されます。

コメント

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