javascript - d3js如何启用拖动或捏/缩放功能到我的地图

Question

我正在开发一个 D3js 项目，我的数据中有这张地图。

我想要做的是定义我的缩放方法以直接缩放到 SVG 的中心，而不是右下角。或者至少我希望能够在放大后拖动整个 SVG，这样会减少痛苦，因为用户可以看到他们自己的国家。

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>

标签： javascriptjqueryd3.jsdata-visualization