DataMap / D3-如何重置缩放？

Question

I have a DataMaps map, which is based on D3.js (version 3), and I've added a zoom on scroll to it. The only problem is that I haven't found a way how to reset it.

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';
} );

Found these two, but I have no idea how to apply it in my case, could you help, please?

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

Thanks a lot!

Answer 1

Try this:

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

On reset (it's a V4 code, not sure it works with V3):

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

Let us know if it works for you