javascript - Mouse Wheel Zoom Map - DataMaps.js - Stack Overflow

admin管理员组

文章数量:1287624

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.

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.

• javascript
• d3.js
• zooming
• world-map
• datamaps

Share Improve this question Follow asked Nov 7, 2014 at 22:44 DenisDenis 3,7071313 gold badges5757 silver badges8888 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 13

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

本文标签： javascriptMouse Wheel Zoom MapDataMapsjsStack Overflow