3

I am using mouse wheel zoom in my d3 Map.Following Code am using.

.on("wheel.zoom", function() {
    var currScale = projection41039.scale();
    var newScale = currScale - 1 * event.deltaY;
    if (newScale >= 150) {
        var currTranslate = projection41039.translate();
        var coords = projection41039.invert([event.offsetX, event.offsetY]);
        projection41039.scale(newScale);
        var newPos = projection41039(coords);
        projection41039.translate([currTranslate[0] + (event.offsetX - newPos[0]),
            currTranslate[1] + (event.offsetY - newPos[1])
        ]);
        updateContents();
    }
})

This works fine for Chrome, but throws an error in Firefox:

ReferenceError: event is not defined

Gerardo Furtado
  • 100,839
  • 9
  • 121
  • 171
Swaroop
  • 501
  • 5
  • 18

1 Answers1

4

The issue here is that Chrome follows the Internet Explorer feature of Window.event, while Firefox doesn't:

enter image description here

For instance, given a button or any other element, the following snippet will work on Chrome, but not on Firefox: 

d3.select("button").on("click", function() {
  console.log(event)
})

Try it here: https://jsfiddle.net/b9h4ntn0/ (I normally use Stack Snippets, but the snippet will freeze in that particular example)

Solution

Use d3.event. That way, you don't rely on Window.event:

d3.select("button").on("click", function() {
  console.log(d3.event)
})

The following code works both on Chrome and Firefox: https://jsfiddle.net/qj787zmj/

Gerardo Furtado
  • 100,839
  • 9
  • 121
  • 171
  • I have replaced event with d3.event but , on scroll the d3.event.deltaY value is different for chrome and firefox. – Swaroop Jan 15 '18 at 08:38
  • At least you have a value! To get a proper explanation I suggest you post this as a *new* question, since it's a different issue. – Gerardo Furtado Jan 15 '18 at 08:40
  • I got the answer from here,https://stackoverflow.com/questions/5527601/normalizing-mousewheel-speed-across-browsers – Swaroop Jan 15 '18 at 09:17