I use global map DataMaps.js. I want to implement Mouse Zoom, when mouse wheel moves. There is a example of static zoom:
var zoom = new Datamap({
element: document.getElementById("zoom_map"),
scope: 'world',
// Zoom in on Africa
setProjection: function(element) {
var projection = d3.geo.equirectangular()
.center([23, -3])
.rotate([4.4, 0])
.scale(400)
.translate([element.offsetWidth / 2, element.offsetHeight / 2]);
var path = d3.geo.path()
.projection(projection);
return {path: path, projection: projection};
}
});
Also, I have event Mouse Wheel:
$('#zoom_map').bind('DOMMouseScroll mousewheel', function(e){
if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
console.log("+");
e.preventDefault();
}
else{
console.log("-");
e.preventDefault();
}
});
I tried to concatenate these parts. Also, I tried to change datamaps.js. But, unfortunately, I get fail.
you can use done
option to make a callback to the zoom function
done: function(datamap){
datamap.svg.call(d3.behavior.zoom().on("zoom", redraw));
function redraw() {
datamap.svg.selectAll("g").attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With