【D3.js】Before After Image Slider
スライダーで２枚の画像を切り替えて比較できる、いわゆる「Before After Image Slider」というものをD3.jsで作ってみた。
「２枚でなく複数枚重ねて切り替えられるものを」ということだったので作ってみたのだけれど、あまり使いがってが良くないのでお蔵入り。せっかくなのでbl.ocksに載せてみた。
わかりやすく色で表示しているが、各div要素のバックグラウドに画像を設定すればイメージスライダーとして使うことができる。
解説
実のところD3はdragビヘイビアを使ってスライダーを制御することにしか使っていない。
scaleメソッドを使うことで稼働範囲を制御している。
|
1 |
var xScale = d3.scale.linear().domain([0, <横幅最大値>]).range([0, <横幅最大値>]).clamp(true) |
ポイントはclampをtrueに指定すること。これによってスケールのドメイン範囲を超えた値は自動的に最小値・最大値に収められる。
|
1 2 3 4 |
function dragFn(d,i ) { var x = d3.select(this).node().offsetLeft + d3.event.dx; d3.select(this).style("left", xScale(x) + "px") } |
dragビヘイビアのコールバックないでマウス座標から得た値を先ほどのスケールを使って稼働範囲ないの値に変換し、スライダー要素(div)のleft値に適用することで、スライダーを実装している。
