Javascript 鼠标滚轮缩放地图-DataMaps.js

我使用全球地图。我想在鼠标滚轮移动时实现鼠标缩放。有一个静态缩放的示例：

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

此外，我还有事件鼠标滚轮：

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

$（'zoom#u map'）.bind（'DOMMouseScroll mouseweel'，函数（e）{
如果（e.originalEvent.wheelDelta>0 | | e.originalEvent.detail<0）{
console.log（“+”）；
e、 预防默认值（）；
}
否则{
控制台日志（“-”）；
e、 预防默认值（）；
}
});

---

我试图连接这些部分。而且，我试着改变。但是，不幸的是，我失败了。

您可以使用

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

---

也可以使用类似的方法重置缩放级别：函数resetZoom（）{datamap.svg.selectAll（“g”）.attr（“transform”，“translate（0,0）scale（1.0）”；}