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