【Raphael.js】エレメント毎に固有のデータを記憶させる方法

data関数

data関数を使用すると、エレメント固有の情報をエレメントごとに持たせておくことが出来ます。名札をつけて雑多なエレメントの中から目的のものを探すといった使い方から、グラフのデータを格納したりと様々な利用方法があります。地味な関数ながらも、これがあるのとないのとではコーディング効率が全く変わってくるでしょう。

実行結果

FullScreen http://jsfiddle.net/nekosmash/7gAeF/embedded/result/

解説

まず、５つのcircleエレメントを描画する際に、それぞれのcircleエレメントに"index"というキーでカウンタを格納しています。そして、クリックされた時にこの”index”で保存されているデータを取り出し、その値が3であった場合は黒で塗り、それ以外を白で塗っています。実際にクリックして試してみてください。キー管理になりますので、複数のデータを持たせることが可能です。

Element.data(key,item);

• Element: データを記憶させるRaphaelエレメント
• key: 記憶するデータのキーとなる値
• key: キーにくっつける値
• 返り値: データを記憶したエレメント