Estoy trabajando en un proyecto D3js donde tengo este mapa con mis datos.
Lo que quiero hacer es definir mi método de zoom para acercar directamente al centro del SVG, no a la esquina inferior derecha. O al menos quiero tener la capacidad de arrastrar todo el SVG después de hacer zoom, eso sería menos doloroso porque el usuario podría ver su propio país.
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>