I'm currently working on a Vue project to create an interactive world map that allows users to drag and zoom. I've attempted to integrate D3 for this purpose, but encountered an issue where the map jumps to the bottom right of the page whenever I try to drag it. Despite my efforts, I haven't been able to pinpoint the exact cause of this problem. The following example demonstrates the sudden jump in the map as soon as I start dragging it:
https://i.stack.imgur.com/4QiBm.gif
All the available documentation and content on Stack Overflow seem to reference an older version of d3 with different syntax, making it challenging to find a solution other than one suggestion mentioning the need to calculate the zoom factor.
If anyone has insights into what I might be doing wrong, I would greatly appreciate the help!
<template>
<div class="map full-width" ref="map">
<svg class="canvas" :viewBox="`0, 0, ${defaultWidth}, ${defaultHeight}`">
<g class="graphic"></g>
</svg>
</div>
</template>
<script>
import { defineComponent } from 'vue'
import { select } from 'd3-selection'
import { transition } from 'd3-transition' // required somehow..
import { transform } from 'd3-transform'
import { geoPath, geoNaturalEarth1 } from 'd3-geo'
import { zoom } from 'd3-zoom'
import { easeCubicInOut } from 'd3-ease'
import { drag } from 'd3-drag'
import json from 'assets/world.json'
import style from 'assets/style.js'
export default defineComponent({
name: 'WorldMap',
props: {
data: {
type: Object,
required: true,
},
maxHeight: {
type: Number,
default: 500,
},
zoomFactor: {
type: Number,
default: 0.2,
validator: (value) => value > 0.0 && value <= 1.0,
},
},
computed: {
map() {
return select('.map')
},
graphic() {
return select('.canvas')
},
path() {
return geoPath().projection(this.projection)
},
projection() {
return geoNaturalEarth1().fitSize(
[this.defaultWidth, this.defaultHeight],
json
)
},
},
data() {
return {
zoom: zoom().on('zoom', this.onZoom),
defaultWidth: 950,
defaultHeight: 550,
lastTransform: { x: 0, y: 0 },
}
},
watch: {
data(val) {
this.renderChart(val)
},
},
methods: {
renderChart(val) {
let prefix = (Math.random() + 1).toString(36).substring(8)
let count = 0
this.graphic
.on('wheel', this.onMouseScroll)
.attr('transform', `translate(0, 0)`)
.call(drag().on('drag', this.onDrag))
.select('g')
.selectAll('path')
.data(json.features)
.enter()
.append('path')
.attr('d', this.path)
.attr('fill', style.secondary())
.attr('stroke', style.primary())
.attr('stroke-width', '0.7px')
.attr('class', () => {
return 'country'
})
.attr('id', () => {
return `country-${prefix}-${count++}`
})
.on('mouseover', this.onMouseOver.bind(this))
.on('mouseleave', this.onMouseLeave.bind(this))
},
onMouseOver(event, element) {
this.graphic
.selectAll('.country')
.filter(function () {
return this.id != event.target.id
})
.transition()
.duration(200)
.style('opacity', 0.5)
this.graphic.select(event.target.id).transition().duration(200)
},
onMouseLeave(event, element) {
this.graphic
.selectAll('.country')
.transition()
.duration(200)
.style('opacity', 1)
},
onMouseScroll(event) {
event.preventDefault()
const scrollDirection = event.deltaY > 0 ? 'down' : 'up'
if (scrollDirection === 'down') {
this.zoomOut()
} else {
this.zoomIn()
}
},
onDrag(event) {
const graphic = this.graphic
const matrix = graphic.node().transform.baseVal.getItem(0).matrix
console.log([matrix.e, matrix.f], [event.x, event.y])
const x = event.x
const y = event.y
graphic.attr('transform', `translate(${x}, ${y})`)
},
onZoom(event) {
this.graphic
.transition()
.duration(250)
.ease(easeCubicInOut)
.attr('transform', event.transform)
},
zoomIn() {
console.log('Zooming in', this.zoomFactor)
this.zoom.scaleBy(this.graphic, 1 + this.zoomFactor)
},
zoomOut() {
console.log('Zooming out')
this.zoom.scaleBy(this.graphic, 1 - this.zoomFactor)
},
resetZoom() {
console.log('Resetting zoom scale.')
this.lastTransform = { x: 0, y: 0 }
this.zoom.scaleTo(this.graphic, 1)
},
},
mounted() {
this.renderChart()
},
})
</script>
<style lang="sass" scoped>
.map
overflow: hidden
</style>