Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

d3 zoom difference between Chrome and Firefox

In the latest Firefox on Windows (28.0), when a zoom behavior is applied as in this example, a single mouse wheel event results in a big zoom change: a factor of ~1.65 vs ~1.18 in Chrome.

Looking at the source code:

d3_behavior_zoomDelta = function() {
  return -d3.event.deltaY * (d3.event.deltaMode ? 120 : 1);
}

Chrome: {deltaMode: 0, deltaY: -100} --> delta = 100

Firefox: {deltaMode: 1, deltaY: -3} --> delta = 360

This explains the difference, but why does this happen? Is this a Firefox or a d3.js issue?

like image 255
Roman L Avatar asked Apr 16 '14 20:04

Roman L


1 Answers

I believe it's a Firefox issue. I got around it by restricting the zoom to within 10% of its current value (and resetting that every time you zoom):

var zoom = d3.behavior.zoom()
  .on("zoom", redraw); 

function redraw() {
  zoom.scaleExtent([zoom.scale()*0.9, zoom.scale()*1.1]);
  ...
}
like image 156
Constantinos Avatar answered Sep 30 '22 14:09

Constantinos