Mouse Wheel Zoom Map - DataMaps.js

Question

Я использую глобальную карту DataMaps.js. Я хочу реализовать Mouse 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}; 
    } 
}); 

Кроме того, у меня есть событие 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(); 
    } 
}); 

Я попытался объединить эти части. Кроме того, я попытался изменить datamaps.js. Но, к сожалению, я потерплю неудачу.

Answer 1

вы можете использовать done вариант, чтобы сделать обратный вызов функции масштабирования

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 + ")"); 
    } 
}