[Vuejs]-D3 world map jumps around when dragging

Found the answer by looking at this post. Turns out I had to be using dx and dy instead of x, and y. The final code looked like this:

onDrag(event) {
  const graphic = this.graphic.select('g')
  const matrix = graphic.node().transform.baseVal.consolidate().matrix
  const [x, y] = [matrix.e + event.dx, matrix.f + event.dy]
  graphic.attr('transform', `translate(${x}, ${y})`)
}