d3.js svg image dragging works, but raises many type errors

Question

I am working on a very small project with d3.js (https://github.com/GiordanoArman/note_app).

I used some code that enables panning, zooming and dragging of a svg image. Everything works fine, but when I open the console I see

Uncaught TypeError: Cannot read property 'x' of undefined

and then plenty of

Uncaught TypeError: Cannot read property '0' of undefined.

I have tried to re-write it but I can not understand what is wrong. Everything works fine, but I would like to have a clean output on the console. Can you help me out?

Answer 1

It looks like in dragged = function (d), d is sometimes null. This is probably also the case for "property '0'" errors as there's a lot of that in D3.v3.js. Do you have line number / file names for these errors?

Are your SVG images ever being hidden? This could cause the events passing a null value.

Running your code, both errors have to do with origin, which happens when you click somewhere other than the top of the SVG. It can't calculate the offset between the mouse and the SVG's location.