962Zooming and Panning in D3 with Bounds
Standard d3.zoom, pans to infinity:
this.zoom = d3.zoom()
.scaleExtent([1/2, 100])
.on("zoom", () => {
g.attr("transform", d3.event.transform)
})
Restrict pan to visible area, adjust padding (p
):
this.zoom = d3.zoom()
.scaleExtent([1/2, 100])
.on("zoom", () => {
var p = 0.95, e = d3.event.transform, w = this.width, h = this.height
e.x = Math.min(Math.max(e.x, -w * e.k * p), w * p)
e.y = Math.min(Math.max(e.y, -h * e.k * p), h * p)
g.attr("transform", e)
})
Vue 2.x, D3 5.0