d3_Before_After_Image

【D3.js】Before After Image Slider

d3_Before_After_Image

example

スライダーで2枚の画像を切り替えて比較できる、いわゆる「Before After Image Slider」というものをD3.jsで作ってみた。
「2枚でなく複数枚重ねて切り替えられるものを」ということだったので作ってみたのだけれど、あまり使いがってが良くないのでお蔵入り。せっかくなのでbl.ocksに載せてみた。
わかりやすく色で表示しているが、各div要素のバックグラウドに画像を設定すればイメージスライダーとして使うことができる。

解説

実のところD3はdragビヘイビアを使ってスライダーを制御することにしか使っていない。
scaleメソッドを使うことで稼働範囲を制御している。

ポイントはclampをtrueに指定すること。これによってスケールのドメイン範囲を超えた値は自動的に最小値・最大値に収められる。

dragビヘイビアのコールバックないでマウス座標から得た値を先ほどのスケールを使って稼働範囲ないの値に変換し、スライダー要素(div)のleft値に適用することで、スライダーを実装している。

カテゴリー: D3v3