d3.js v4 で画像を拡大・縮小・ドラッグする

ちょっとブラウザ上でマウスホイールを使って画像を拡大・縮小したりドラッグしたかったので試してみました。

ググるといろいろな手法が出てきましたが d3.js v3 の頃のものだっりしますが、 GUNMA GIS GEEK 清水さんのブログの内容は v4 でとてもシンプルだったので、この内容を少し書き換えるだけで簡単にできました。

SVG の中に image オブジェクトを足してそいつをグリグリさせています。
元の画像が 1024x1024 だったものを 1/3 の大きさにして表示させています。