GUNMA GIS GEEK

群馬県の片隅でオープンデータとデータビジュアライゼーションとGIS(地理情報システム)に戯れるエンジニアのブログ

D3v3

【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値に適用することで、スライダーを実装している。

About Me

著者: 清水正行
所在地: 群馬県高崎市

群馬・東京間を行き来する出稼ぎエンジニア。GIS(地理情報システム)・データビジュアライゼーション・オープンデータなどについて書いてます。