javascript - DataMap/D3 - 如何重置缩放？

Question

我有一个DataMaps map ，它基于 D3.js(版本 3)，我在其中添加了滚动缩放功能。唯一的问题是我还没有找到重置它的方法。

var reset = document.getElementById('reset-map');
var map = new Datamap({
     element: document.getElementById('world-map'),
     responsive: true,       
});
map.svg.call(d3.behavior.zoom().on('zoom', function () {
     reset.style.display = 'block';
     map.svg.selectAll('g').attr('transform', 'translate(' + d3.event.translate + ')' + ' scale(' + d3.event.scale + ')')
}));
reset.addEventListener('click', function (e) {
     e.preventDefault();
     // TODO remove zoom
     reset.style.display = 'none';
} );

找到了这两个，但我不知道如何将其应用到我的案例中，你能帮忙吗？

• https://github.com/d3/d3-zoom/issues/107
• How to reset Zoom in d3.js?

非常感谢!

Answer 1

试试这个:

var zoom = d3.behavior.zoom().on('zoom', function () {...});
map.svg.call(zoom);

重置时(这是 V4 代码，不确定是否适用于 V3):

var transform = d3.zoomIdentity.translate(0, 0).scale(1);
map.svg.call(zoom.transform, transform);

请告诉我们它是否适合您