CODEWITHSUNDEEP
javascriptd3.js
olop01
olop01

Reputation: 273

d3js zoom eventhandlers not firing events properly

I am using the d3.zoom() function in d3 version 4.2.8 to move across my force diagram. I want the mouse pointer to change to the move cursor, as long as I am "dragging myself" over the diagram. As soon as I let go the mouse button, it should change back to "crosshair".

I used two console logs to see when the events are fired. In the console it works: When I click and hold the mouse button it says "Zoom begin" and as soon as I leave it, it says "Zoom finish".

Only thing that does not work is the change of the cursor to "move": Though the console says "Zoom begin" the cursor stays at "default". It will only change to "move" after I leave the mouse button (and then change immediately to the "crosshair" since "Zoom finish" fires).

Why does the console print the message at the correct time, but the cursor gets changed after I leave the mouse button again?

// Prepare Zoom and Panning settings
var zoom = d3.zoom()
    .scaleExtent([.1, 10])
    .on("start", zoomBegin)
    .on("end", zoomFinish)
    .on("zoom", zoomed);

// View is needed as the new D3V4 zoom cannot be applied directly on the SVG but a group element    
var view = svg.append("g");

svg.call(zoom)
    //prevent triggering the zoom on dblclicks
    .on("dblclick.zoom", null);

function zoomed() {
  view.attr("transform", d3.event.transform);
}

function zoomBegin() {
    console.log("Zoom begin");
    body.style("cursor", "move");
}

function zoomFinish() {
    console.log("Zoom finish"); 
    //body.style("cursor", "crosshair");
}

Upvotes: 1

Views: 515

Answers (1)

Mark
Mark

Reputation: 108512

As I stated in my comments, I tried this out here. It works for me in IE11 and Edge. It also works in chrome if I don't have developer tools open. If the dev tools are open it does what you describe. There's a real old bug report about it here describing all the gory details.

Code cause I can't post without it :)

function zoomBegin() {
  console.log("Zoom begin");
  svg.style("cursor", "move");
}

function zoomFinish() {
  console.log("Zoom finish");
  svg.style("cursor", "auto");
}

Upvotes: 1

Related Questions