Zoom only when Ctrl + scrolling

Question

I've been messing with the D3JS source code. What I want to achieve is only allow zooming with the Scrolling (Just like Google Maps), if CTRL is pressed too. I've been messing with the complete D3: https://d3js.org/d3.v4.js

I was trying to achieve this around line 16556:

  function wheeled() {
    if (!filter.apply(this, arguments)) return;
    if (event.ctrlKey == false) return;    //This is the new line I added
    .....
    //else if ((t.k === k)) return;        //I commented out this line

Everything else is intact. I downloaded this, and I've been experiencing with this sample: https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172

In Chrome it's working perfectly. Everything is at it's supposed to be, however when I try to Ctrl+Scroll in Firefox, it just zooms the whole page. The Firefox sais that:

ReferenceError: event is not defined[Learn More] d3.v4.js:16558:1
    wheeled http://127.0.0.1:8887/d3.v4.js:16558:1
    contextListener/<

You don't need to mess with the source code... Just add that to **your** code, inside the zoom function. — Gerardo Furtado, Jan 19 '18 at 07:47
In the example I linked, I tried adding if (event.ctrlKey == false) return; in the begining of the function zoomed(){ And in Chrome it works fine, however it's the same thing with Firefox. Also this way I can't scroll the page, if I'm on the chart, which the Google Maps can do, and this would be the whole point. — CAJ69I, Jan 19 '18 at 08:06
This is *almost* a duplicate (see my answer below). Regarding the scroll issue when over the chart, I suggest you post it as a different question, since it is a different issue. — Gerardo Furtado, Jan 19 '18 at 08:20
Mmm... on a second thought, I changed my mind: This **is** a duplicate. Just deleted my answer and closed your question. Just use `if (d3.event.sourceEvent.ctrlKey == false) return;`. — Gerardo Furtado, Jan 19 '18 at 08:24
This is not a solution. Double click zoom no longer works, scrolling the normal page no longer works. Scrolling values are logged, and once I press ctrl+scroll, it zooms in like I scrolled all the previous scrolls with ctrl. — CAJ69I, Jan 19 '18 at 08:38
Ok then. I reopened your question and undeleted my answer, for context. I answered the firefox issue. However, as you have different issues, I'll give this advice again: break up your question and ask about each individual issue as a *different* question. — Gerardo Furtado, Jan 19 '18 at 08:39

score 1 · Answer 1 · answered Dec 07 '18 at 15:18

I stumbled upon the same problem, but don't wanted to alter the d3 source files. I solved it then by only conditionally calling the original wheel handler (I am using D3v4):

this.zoom = d3.zoom()[...]

var svg = d3.select(this.$refs.chart)
             .call(this.zoom);

var wheeled = svg.on("wheel.zoom");

svg
    .on("wheel.zoom", function () {
        if (d3.event.ctrlKey) {
            wheeled.call(this);
            // prevent browser zooming at minimum zoom
            d3.event.preventDefault();
            d3.event.stopImmediatePropagation();
        }
    });

score 0 · Answer 2 · answered Jan 19 '18 at 08:16

0

As I explained in my comment you don't need to mess with the source code, just add the conditional to your code. In your reply you said that it doesn't work on Firefox.

Well, that's the expected behaviour for Firefox (see my answer here).

Therefore, instead of:

if (event.ctrlKey == false) return;

You should do:

if (d3.event.sourceEvent.ctrlKey == false) return;

This will work on both Chrome and Firefox.

Here is the bl.ocks with that change: http://blockbuilder.org/anonymous/2a1c5fe3ed6948665f8d946a753adaef

answered Jan 19 '18 at 08:16

Gerardo Furtado

100,839
9
121
171

Unfortunately this disabled the double click zooming, when I'm scrolling without ctrl and then scroll ONE with ctrl, the zoom is as big as if I've scrolled all the time with ctrl. Also when I'm in full view (zero zoom), and try to ctrl+scroll down, the whole page get shrinked. – CAJ69I Jan 19 '18 at 08:41
@CAJ69I Again, as I explained in the comment section for your question: this is a **different** issue. Here I'm answering only *"why"* you get that error for Firefox. Do you still get that error? No, you don't: because of my answer. Now you have **another** issue. Here at S.O. we deal with just **one problem** per question. – Gerardo Furtado Jan 19 '18 at 08:43
My original issue, if you read back, was this: "What I want to achieve is only allow zooming with the Scrolling (Just like Google Maps), if CTRL is pressed too." On the way trying to achieve this I got the error, which you answered. Fortunately I found the solution by editing the source code with a bit of editing of your suggestion. Thank you. – CAJ69I Jan 19 '18 at 08:47

score 0 · Answer 3 · answered Dec 23 '18 at 22:54

Use a filter to require ctrlKey to start the zoom event. Disable scrolling when ctrlKey is pressed to prevent the browser's default action when scrolling passed the scale extent. Both things are hinted in zoom docs.

// ignore right button and require ctrl
zoom.filter(() => !d3.event.button && d3.event.ctrlKey)

// ignore default browser action when ctrlKey is pressed
selection
  .call(zoom)
  .on("wheel", () => { if (d3.event.ctrlKey) d3.event.preventDefault() })

score -1 · Accepted Answer · answered Jan 19 '18 at 08:45

-1

Added this line:

if (d3.event.ctrlKey == false) return;

Into the source code of the d3.v4.js:

  function wheeled() {

At the second line after it. Now it works. Thanks for the suggestion, it helped after all :)

answered Jan 19 '18 at 08:45

CAJ69I

261
1
2
10

Zoom only when Ctrl + scrolling

4 Answers4