I am working on a D3js project where I have this map with my data.
What I want to do is define my zoom method to zoom direct to the center of the SVG, not the bottom right corner. Or at least I want to have the ability to drag the whole SVG after zooming in, that would be less pain because the user would be able to see their own country.
const width = 700;
const height = 500;
const svg = d3.select('section').append('svg').attr('width', width).attr('height', height);
const projection = d3.geoMercator().scale(100).translate([width / 2, height / 1.4]);
const path = d3.geoPath(projection);
const g = svg.append('g');
d3.json('https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json').then(data => {
const countries = topojson.feature(data, data.objects.countries);
g.selectAll('path').data(countries.features).enter().append('path').attr('class', 'country').attr('d', path);
var zoom = d3.zoom().on('zoom', function() {
svg.attr('transform', d3.event.transform);
})
d3.select('#zoomin').on('click', function() {
zoom.scaleBy(svg.transition().duration(750), 1.3);
});
d3.select('#zoomout').on('click', function() {
zoom.scaleBy(svg.transition().duration(750), 1 / 1.3);
});
});<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.2/topojson.min.js" integrity="sha512-4UKI/XKm3xrvJ6pZS5oTRvIQGIzZFoXR71rRBb1y2N+PbwAsKa5tPl2J6WvbEvwN3TxQCm8hMzsl/pO+82iRlg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<section>
</section>
<button id="zoomin">+</button>
<button id "zoomout">-</button>