Better mousewheel precision.

Copy Mike's new mousewheel hack from Polymaps. Fixes #156.
d3 · May 30, 2011 · a59683e · a59683e
1 parent 98ef2d1
commit a59683e
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 27 deletions.
diff --git a/d3.behavior.js b/d3.behavior.js
@@ -3,10 +3,7 @@
 // TODO unbind listener?
 d3.behavior.zoom = function() {
 
-  // https://bugs.webkit.org/show_bug.cgi?id=40441
-  var bug40441 = /WebKit\/533/.test(navigator.userAgent) ? -1 : 0,
-      bug40441Last = 0,
-      x = 0,
+  var x = 0,
       y = 0,
       z = 0,
       listeners = [],
@@ -53,6 +50,20 @@ d3.behavior.zoom = function() {
     }
   }
 
+  // mousewheel events are totally broken!
+  // https://bugs.webkit.org/show_bug.cgi?id=40441
+  // not only that, but Chrome and Safari differ in re. to acceleration!
+  var inner = document.createElement("div"),
+      outer = document.createElement("div");
+  outer.style.visibility = "hidden";
+  outer.style.top = "0px";
+  outer.style.height = "0px";
+  outer.style.width = "0px";
+  outer.style.overflowY = "scroll";
+  inner.style.height = "2000px";
+  outer.appendChild(inner);
+  document.body.appendChild(outer);
+
   function mousewheel(d, i) {
     var e = d3.event;
 
@@ -72,16 +83,17 @@ d3.behavior.zoom = function() {
     if (e.type === "dblclick") {
       z = e.shiftKey ? Math.ceil(z - 1) : Math.floor(z + 1);
     } else {
-     var delta = (e.wheelDelta / 120 || -e.detail) * .1;
-
-      /* Detect fast & large wheel events on WebKit. */
-      if (bug40441 < 0) {
-        var now = Date.now(), since = now - bug40441Last;
-        if ((since > 9) && (Math.abs(e.wheelDelta) / since >= 50)) bug40441 = 1;
-        bug40441Last = now;
+      var delta = e.wheelDelta || -e.detail;
+      if (delta) {
+        try {
+          outer.scrollTop = 1000;
+          outer.dispatchEvent(e);
+          delta = 1000 - outer.scrollTop;
+        } catch (error) {
+          // Derp! Hope for the best?
+        }
+        delta *= .005;
       }
-      if (bug40441 === 1) delta *= .03;
-
       z += delta;
     }
 

diff --git a/d3.behavior.min.js b/d3.behavior.min.js
diff --git a/src/behavior/zoom.js b/src/behavior/zoom.js
@@ -2,10 +2,7 @@
 // TODO unbind listener?
 d3.behavior.zoom = function() {
 
-  // https://bugs.webkit.org/show_bug.cgi?id=40441
-  var bug40441 = /WebKit\/533/.test(navigator.userAgent) ? -1 : 0,
-      bug40441Last = 0,
-      x = 0,
+  var x = 0,
       y = 0,
       z = 0,
       listeners = [],
@@ -52,6 +49,20 @@ d3.behavior.zoom = function() {
     }
   }
 
+  // mousewheel events are totally broken!
+  // https://bugs.webkit.org/show_bug.cgi?id=40441
+  // not only that, but Chrome and Safari differ in re. to acceleration!
+  var inner = document.createElement("div"),
+      outer = document.createElement("div");
+  outer.style.visibility = "hidden";
+  outer.style.top = "0px";
+  outer.style.height = "0px";
+  outer.style.width = "0px";
+  outer.style.overflowY = "scroll";
+  inner.style.height = "2000px";
+  outer.appendChild(inner);
+  document.body.appendChild(outer);
+
   function mousewheel(d, i) {
     var e = d3.event;
 
@@ -71,16 +82,17 @@ d3.behavior.zoom = function() {
     if (e.type === "dblclick") {
       z = e.shiftKey ? Math.ceil(z - 1) : Math.floor(z + 1);
     } else {
-     var delta = (e.wheelDelta / 120 || -e.detail) * .1;
-
-      /* Detect fast & large wheel events on WebKit. */
-      if (bug40441 < 0) {
-        var now = Date.now(), since = now - bug40441Last;
-        if ((since > 9) && (Math.abs(e.wheelDelta) / since >= 50)) bug40441 = 1;
-        bug40441Last = now;
+      var delta = e.wheelDelta || -e.detail;
+      if (delta) {
+        try {
+          outer.scrollTop = 1000;
+          outer.dispatchEvent(e);
+          delta = 1000 - outer.scrollTop;
+        } catch (error) {
+          // Derp! Hope for the best?
+        }
+        delta *= .005;
       }
-      if (bug40441 === 1) delta *= .03;
-
       z += delta;
     }