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?
Thanks a lot!
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.