Cannot pan SVG when the cursor is on the svg itself in D3.js

Community Help
1

I’ve made a simple Zoom & Pan notebook but I have two questions:

  1. If the curson is on the black square (i.e. SVG), it dosen’t click and drag anymore! How to allow drag at all time?
  2. How to disable zoom function when mouse is scroling and keep only panning?

Thank you very much!

I’tried different code snnipets, but the simpler one I found don’t behave like I would like.

  • List item
1 Like
2

Hey @cittadhammo! Fun questions – I’ve made a notebook to help answer them.

  1. I added pointer-events: none to the black square so that your mouse is always interacting with the larger black square behind it
  2. I added a toggle input to conditionally execute the code that adds the zoom functionality.

A few other little tweaks in there, let me know if you have any more questions!

1 Like
3

That is great ! Thank you! I’ll be using it in my notebooks

1 Like
4

In your notebook, the behaviour of the draging is very strange when clicking inside the white square.

The main SVG get translated to cursor coordinates because of .attr("transform", translate(${event.x}, ${event.y}))

But this is the line that make the drag possible… ;-(

I’m not sure I understand completly. Could it be possible to overlay the all chart with a transparent square that could be grab and move nicely ?

5

Ah, I see – it’s a little jumpy – I updated the notebook to just have the mouse events on the containing <g> element – how does that work?

6

Yes it works very well thanks !

Also I added .attr("cursor", "grab") to the main svg element to have a grab cursor at all time :wink:

Thanks and be well !

1 Like
7

Ok, actually point 2) How to disable zoom function when mouse is scroling and keep only panning? is not working in your exemple. When disabeling the zoom, you cannot pan anymore… ;_)

8

That’s because the “pan” that you refer to is actually controlled by the zoom behavior, as described in the d3.zoom documentation. Your drag functions are actually not doing anything at all and, if you pull up the Javascript console while working with your original notebook, you’ll notice that all sorts of errors are thrown when you try to drag the black square. So, the easiest way to fix this is to simply remove your call to the drag functions:

// Delete this
g.call(
 d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended)
);

I guess the definitions of those functions should be removed as well.

If you want to disable the wheel zoom, you should add .on("wheel.zoom", null) when you call zoom on the svg:

svg.call(
  d3
  .zoom()
  .extent([
    [0, 0],
    [w, w]
  ])
  .scaleExtent([1, 8])
  .on("zoom", zoomed)
  .on("wheel.zoom", null);

Of course, you can do that in response to a button push, if desired.

9

OK Good ! indeed I removed all the code for the drag.

The

throw me an error, so I’ve used .scaleExtent([1, 1]) instead.

And this is what I wanted :wink:

With .scaleExtent([1, enableZoom ? 8 : 1]) I get the optional checkbox fit in. see New notebook