How to implement mouse wheel zoom in D3 like Google Map with overlay and Ctrl + Scroll event?

Question

I implemented zoom with D3 js so whenever the mouse is hover over the canvas the zoom events triggers and allow a user to use the mouse wheel to zoom in and out.

Demo : https://diversity.rcc.uchicago.edu/collapsible_tree

But I want to prevent this default behavior of D3 zoom and need to enforce user to user Ctrl + Scroll to zoom the canvas like google map does : http://jsfiddle.net/maunovaha/jptLfhc8/

Is there anyway we can show the overlay to request a user to do use the combination and then only allow zoom.

My code for zoom is like this:

var svg = d3.select("#collapsible-tree")
    .append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
    .call(zm = d3.behavior.zoom().scaleExtent([0.1, 3]).on("zoom", redraw))
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

//Redraw for zoom
function redraw() {
    //console.log("here", d3.event.translate, d3.event.scale);
    svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

Answer 1

Using the latest d3 version and referring to Gniestschow answer

const maxScale=4;
var zoomListener = d3
  .zoom()
  .scaleExtent([0.1, maxScale])
  .on("zoom", zoom);

var svgContainer=d3.select("#container").call(zoomListener);
var svgGroup=svgContainer.append("g")
var wheeled = svgContainer.on("wheel.zoom");
 
svgContainer
  .on("wheel.zoom", null)

window.onkeydown = listenToTheKey;
window.onkeyup = listenToKeyUp;

function listenToTheKey(event) {
  if (event.ctrlKey) svgContainer.on("wheel.zoom", wheeled);
}
function listenToKeyUp() {
  svgContainer.on("wheel.zoom", null);
}
function zoom(event) {
  svgGroup.attr("transform", event.transform.toString()); 
}

Answer 2

I stumbled upon the same problem and solved it 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();
        }
    });

Answer 3

You can disable required d3 zoom events by setting that particular event to null.

    svg.call(zoom) // zoom disable
                .on("wheel.zoom", null)
                .on("mousedown.zoom", null)
                .on("touchstart.zoom", null)
                .on("touchmove.zoom", null)
                .on("touchend.zoom", null);

Answer 4

I had the same problem a few weeks ago. But i used dagreD3. The function i used are from D3. Here is my working fiddle.

JS Fiddle

// Create a new directed graph
var g = new dagreD3.graphlib.Graph().setGraph({})
  .setDefaultEdgeLabel(function() {
    return {};
  });
// Disable Browserzoom with strg + mousewheel
$(document).keydown(function(event) {
  if (event.ctrlKey == true && (event.which == '61' || event.which == '107' || event.which == '173' || event.which == '109' || event.which == '187' || event.which == '189')) {
    alert('disabling zooming');
    event.preventDefault();
  }
});

$(window).bind('mousewheel DOMMouseScroll', function(event) {
  if (event.ctrlKey == true) {
    event.preventDefault();
  }
});

// Check if strg is pressed
var ctrlPressed = false;
$(window).keydown(function(evt) {
  if (evt.which == 17) {
    ctrlPressed = true;
    console.log("pressed");
  }
}).keyup(function(evt) {
  if (evt.which == 17) {
    ctrlPressed = false;
    console.log("not pressed");
  }
});

//adding nodes and edges

g.setNode(0, {
  label: "TOP",
});
g.setNode(1, {
  label: "S",
});
g.setNode(2, {
  label: "NP",
});
g.setNode(3, {
  label: "DT",
});
g.setNode(4, {
  label: "This",
});
g.setNode(5, {
  label: "VP",
});
g.setNode(6, {
  label: "VBZ",
});
g.setNode(7, {
  label: "is",
});
g.setNode(8, {
  label: "NP",
});
g.setNode(9, {
  label: "DT",
});
g.setNode(10, {
  label: "an",
});
g.setNode(11, {
  label: "NN",
});
g.setNode(12, {
  label: "example",
});
g.setNode(13, {
  label: ".",
});
g.setNode(14, {
  label: "sentence",
});

g.setEdge(3, 4);
g.setEdge(2, 3);
g.setEdge(1, 2);
g.setEdge(6, 7);
g.setEdge(5, 6);
g.setEdge(9, 10);
g.setEdge(8, 9);
g.setEdge(11, 12);
g.setEdge(8, 11);
g.setEdge(5, 8);
g.setEdge(1, 5);
g.setEdge(13, 14);
g.setEdge(1, 13);
g.setEdge(0, 1);

// Round the corners of the nodes
g.nodes().forEach(function(v) {
  var node = g.node(v);
  node.rx = node.ry = 5;
});

//makes the lines smooth
g.edges().forEach(function(e) {
  var edge = g.edge(e.v, e.w);
  edge.lineInterpolate = 'basis';
});

// Create the renderer
var render = new dagreD3.render();
var width = 500,
  height = 1000,
  center = [width / 2, height / 2];
// Set up an SVG group so that we can translate the final graph.
var svg = d3.select("svg"),
  inner = svg.append("g");
var zoom = d3.behavior.zoom()
  .on("zoom", zoomed);

function zoomed() {
  inner.attr("transform", "translate(" + zoom.translate() + ")scale(" + zoom.scale() + ")");
}
svg.call(zoom)
svg.on("wheel.zoom", null);
svg.on("dblclick.zoom", null);
svg.call(zoom.event);
document.getElementById("container").addEventListener("wheel", myFunction);

function myFunction(event) {
  if (ctrlPressed == true) {
    if (event.wheelDelta > 0) {
      zoom_by(1.03);
    } else if (event.wheelDelta < 0) {
      zoom_by(1 / 1.03);
    }
  }
}

function zoom_by(factor) {
  var scale = zoom.scale(),
    extent = zoom.scaleExtent(),
    translate = zoom.translate(),
    x = translate[0],
    y = translate[1],
    target_scale = scale * factor;

  // If we're already at an extent, done
  if (target_scale === extent[0] || target_scale === extent[1]) {
    return false;
  }
  // If the factor is too much, scale it down to reach the extent exactly
  var clamped_target_scale = Math.max(extent[0], Math.min(extent[1], target_scale));
  if (clamped_target_scale != target_scale) {
    target_scale = clamped_target_scale;
    factor = target_scale / scale;
  }

  // Center each vector, stretch, then put back
  x = (x - center[0]) * factor + center[0];
  y = (y - center[1]) * factor + center[1];

  // Enact the zoom immediately
  zoom.scale(target_scale)
    .translate([x, y]);
  zoomed();
}
// Run the renderer. This is what draws the final graph.
render(inner, g);

// Center the graph
var initialScale = 1.0;
zoom.translate([(svg.attr("width") - g.graph().width * initialScale) / 2, 20])
  .scale(initialScale)
  .event(svg);
svg.attr("height", g.graph().height * initialScale + 40);