Uncaught TypeError: Cannot read property '0' of undefined from wheeled function about d3-zoom HOT 5 CLOSED

Please post an example that reproduces this issue. Otherwise I may not be
able to investigate.
On Wed, Jul 6, 2016 at 6:44 PM Valter Martinek [email protected]
wrote:

I probably came upon some kind of edge case. When zooming in and out I'm
getting

Uncaught TypeError: Cannot read property '0' of undefined

I have traced this back to wheeled function in zoom.js. Specifically on line
218

d3-zoom/src/zoom.js

Line 218 in cff5362

g.zoom("mouse", constrain(translate(scale(t, k), mousePoint, mouseLocation), g.extent));

g.zoom("mouse", constrain(translate(scale(t, k), mousePoint, mouseLocation), g.extent));

In my case g.extent is undefined.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#41, or mute the thread
https://github.com/notifications/unsubscribe/AAOEjT9b3_V3b1zEIcbgz2aIKVuQmhyBks5qTC-xgaJpZM4JGk7t
.

from d3-zoom.

I hit this while trying to figure out how to implement zooming so the code is somewhat dirty. There are also sample data I'm using.

https://gist.github.com/martinek/106a9159426c7c13f5a6a06224da20d9

Edit: also this is using npm "d3": "^4.1.0".

from d3-zoom.

I’d say this is mostly a bug in your code, but maybe d3-zoom could handle this better. I wasn’t able to reproduce the error, but I did notice a bug bug investigating your code and I think it is the most likely cause.

The problem is that you’ve applied the zoom behavior twice: once to the G element and once to a child RECT element. With 🌶 for emphasis:

const svg = d3.select(elem).append("svg")
    .attr("width", size.width)
    .attr("height", size.height)
    .append("g")
    .call(zoom); // 🌶

// zoom panel
svg.append("rect")
    .attr('class', 'zoom-panel')
    .attr("width", size.width)
    .attr("height", size.height)
    .call(zoom); // 🌶🌶

So, when the wheel event is received, I think it’s possible that the zoom behavior could be confused: the zoom behavior isn’t able to handle multiple simultaneous wheel gestures, and the RECT and G element are treated as separate zoom gestures because you applied the zoom behavior to them separately.

I suspect this also has something to do with how the zoom behavior doesn’t consume wheel events that don’t trigger a change to zoom, thereby sometimes allowing both the RECT and G elements to start concurrent gestures, and then cause the race condition with the shared wheelTimer.

I think I can fix the error by making the wheelTimer state specific to the applied element rather than shared by the zoom behavior, but you’ll still want to fix your code so that the zoom behavior is only applied once.

Also… if you want your dates to parse across browsers you shouldn’t rely on Date.parse and instead use d3-time-format, e.g.,

var parseTime = d3.timeParse("%Y-%m-%d %H:%M:%S %Z");;

from d3-zoom.

Thanks for tips. That double zoom fixed some weird behavior I was getting.

from d3-zoom.

I pushed a fix in 1.0.2. If you have a chance to test it (with the double-zoom applied) and see if this fixes the TypeError, that would be helpful since I was never able to reproduce that error. You can load d3-zoom on top of the default D3 bundle:

<script src="//d3js.org/d3.v4.js"></script>
<script src="//d3js.org/d3-zoom.v1.js"></script>

If you can’t, no worries. I’ll push a new D3 patch release 4.1.1 tomorrow most likely.

from d3-zoom.